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

:root {
    tab-size: 4;
    --base-font-size: 1rem;
    --base-line-height: 1;
    --base-line-height: 0.92;
    --base-letter-spacing: 0;

    --h-one-m-fix: -10px;
}

@media(min-width: 1024px) {
    :root {
        --h-one-m-fix: -20px;
    }
}

html {
    --d-text-opacity: 1;
    --d-bg-opacity: 1;
    color: rgba(0,0,0,var(--d-text-opacity));
    background-color: rgba(255,255,255,var(--d-bg-opacity));
    min-height: 100%;
    font-size: 14px;
    text-size-adjust: 100%;
}

body,
html,
#notnuxt {
    --d-text-opacity: 1;
    --d-bg-opacity: 1;
    display: flex;
    flex-direction: column;
    flex: 1 1 0%;
    background-color: rgba(255,255,255,var(--d-bg-opacity));
}

@font-face {
    font-family: 'AnekLatin';
    src: url('../misc/subset-AnekLatin-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AnekLatin';
    src: url('../misc/subset-AnekLatin-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

body {
    margin: 0;
    padding: 0;
    position: relative;
    font-family: "AnekLatin", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: var(--base-font-size);
    line-height: var(--base-line-height);
    letter-spacing: var(--base-letter-spacing);
    text-transform: uppercase;
}

*, ::before, ::after {
    box-sizing: border-box;
    border-width: 0px;
    border-style: solid;
    border-color: currentcolor;
}

h1, h2, h3, h4, h5, h6 {
    font: inherit;
}

a {
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    text-decoration: inherit;
}

a, button, input {
    outline: transparent solid 2px;
    outline-offset: 2px;
}

img {
    -webkit-user-drag: none;
    border-style: solid;
}

img, video {
    max-width: 100%;
    height: auto;
}

img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
}

button {
    background-color: transparent;
    background-image: none;
    text-transform: none;
}

button, input, optgroup, select, textarea {
    margin: 0;
    padding: 0px;
    line-height: inherit;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
}

button, [type="button"], [type="reset"], [type="submit"] {
    appearance: button;
}

button, [role="button"] {
    cursor: pointer;
}


/* // */
.g-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0px, 1fr));
    column-gap: 2rem;
    position: relative;
}

@media (min-width: 480px) {
    .g-grid {
        grid-template-columns: repeat(6, minmax(0px, 1fr));
    }
}

@media (min-width: 1024px) {
    .g-grid {
        grid-template-columns: repeat(24, minmax(0px, 1fr));
        margin-bottom: 21.1vh;
    }
}

.b-size {
    padding: 0px 10px;
}

@media (min-width: 1024px) {
    .b-size {
        padding: 0px 20px;
    }
}

/* //h// */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    mix-blend-mode: difference;
    z-index: 1000;
}

.header-inner {
    position: relative;
    padding-bottom: 1rem;
    padding-top: 1rem;
}

.Header__Left {
    grid-column: 1 / 4;
}

@media (min-width: 1024px) {
    .Header__Left {
        grid-column: 1 / 6;
    }
}

.Header__Left .Header__Logo__Link {
    position: relative;
    display: inline-flex;
    max-width: max-content;
    text-transform: uppercase;
}

.Header__Left .LogoButton {
    position: relative;
}

.Header__Nav {
    display: none;
}

@media(min-width: 1024px) {
    .Header__Nav {
        display: flex;
        margin-top: 0.6rem;
    }
}

.Header__Nav .Link__Div {
    padding-bottom: 0.4rem;
}

.Link__Div a {
    position: relative;
    display: inline-flex;
    max-width: max-content;
    text-transform: uppercase;
}

.Header__Nav .Link__Div .inner{
    position: relative;
}

.Header__Nav .Link__Div .inner::before{
    position: absolute;
    bottom: -0.3rem;
    left: 0px;
    width: 100%;
    height: 0.1rem;
    background-color: currentcolor;
    content: "";
    transform-origin: left top;
}



.Header__Nav .Separator::after {
    content: "/";
    margin-left: 0.4rem;
    margin-right: 0.4rem;
    padding-bottom: 0.4rem;
}

.Header__About {
    display: none;
}

.Header__About a {
    position: relative;
    display: inline-flex;
    max-width: max-content;
    text-transform: uppercase;
    margin-top: 0.6rem;
}

.Header__About a::after {
        position: absolute;
        bottom: -0.3rem;
        left: 0px;
        width: 100%;
        height: 0.1rem;
        background-color: currentcolor;
        content: "";
        transform-origin: left top;
}

@media(min-width: 1024px) {
    .Header__About {
        display: block;
        grid-column: 9 / 15;
    }
}

.Header__Year {
    grid-column: 4 / 5;
}

@media(min-width: 1024px) {
    .Header__Year {
        grid-column: 16 / 18;
    }
}

.Header__Year .Inner__Div {
    display: flex;
}

.Header__Last {
    transform: translateX(0) translateY(-0.4rem) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
    grid-column: 6 / span 1;
    justify-self: end;
}

@media(min-width: 1024px) {
    .Header__Last {
        display: none;
    }
}

.Header__Last .Header__Menu__Button {
    position: relative;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    width: 2rem;
    height: 100%;
}

.Header__Menu__Button::before, .Header__Menu__Button::after {
    content: "";
    position: absolute;
    left: 0px;
    width: 100%;
    height: 0.1rem;
    height: 1px;
    background-color: currentcolor;
    transition: transform 0.2s ease 0s;
}

.Header__Menu__Button::before {
    top: 0px;
    transform: translateY(4px);
}

.Header__Menu__Button--active::before {
    transform: translateY(11px) rotate(45deg);
}

.Header__Menu__Button::after {
    bottom: 0px;
    transform: translateY(-4px);
}

.Header__Menu__Button--active::after {
    transform: translateY(-4px) rotate(-45deg);
}



/* // */
#main {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    flex: 1 1 0%;
}

.hero-section .intro {
    grid-column: 1 / -1;
    position: relative;

/*     display: flex; */
/*     flex-direction: column; */
/*     justify-content: flex-start; */
/*     margin-top: 0px; */

    grid-column: 1 / -1;
    position: relative;
    margin-top: 8.7vh;
}

/* @media(min-width: 1024px) {
    .hero-section .intro {
        display: flex;
        flex-direction: column;
        -webkit-box-pack: end;
        justify-content: flex-end;
        margin-top: 0px;
        height: 454px;
    }
} */

.intro h1 {
    display: flex;
    flex-direction: column;
    font-weight: 700;
    font-weight: bold;
    font-size: clamp(40px, 18vw, 160px);
    line-height: 0.9;
    margin-left: var(--h-one-m-fix);
    letter-spacing: 0.017000em;
    font-family: "AnekLatin";
}

@media(min-width: 1024px) {
    .intro h1 {
        font-size: clamp(40px, 18vw, 18rem);
    }
}

.MaskWrapper {
    position: relative;
    overflow: hidden;
}

.FMaskChild {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    width: 100%;
    transition: transform 1.05s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    transform: translate3d(0px, 0px, 0px);
}

.BMaskChild {
    display: inline-flex;
    transition: transform 1.05s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    transform: translate3d(0px, 0px, 0px);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    --d-text-opacity: 1;
    color: rgba(255,255,255,var(--d-text-opacity));
    mix-blend-mode: overlay;
/*     mix-blend-mode: color-dodge; */
    z-index: 10;
    pointer-events: none;
}


.hero-section .small-hero-feature{
    
    grid-column: 1 / -1;
    
    display: grid;
    grid-template-columns: repeat(12, minmax(0px, 1fr));
    column-gap: 2rem;
    align-self: flex-start;
    margin-top: -12vh;
    order: 4000;


    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(6, minmax(0px, 1fr));
    column-gap: 2rem;
    align-self: flex-start;
    order: 9999;
    margin-top: 10.8vh;
}

@media(min-width: 1024px) {
    .hero-section .small-hero-feature {
        grid-column: span 12 / span 12;
        grid-template-columns: repeat(12, minmax(0px, 1fr));
        margin-top: 12vh;
        order: 0;
    }
}

.small-hero-feature .top {
    margin-bottom: 4rem;
}

.small-hero-feature .top p {
    line-height: 1.14;
}

.small-hero-feature .cta {
    grid-column: 1 / -1;
    margin-bottom: 14vh;
}

@media(min-width: 1024px) {
    .small-hero-feature .cta {
        grid-column: 6 / span 7;
    }
}

.small-hero-feature .BaseButton {
    display: flex;
    position: relative;
    display: inline-flex;
    max-width: max-content;
    text-transform: uppercase;
    font-size: 20px;
    line-height: 0.92;
    letter-spacing: 0;
}

.small-hero-feature .BaseButton::before {
    padding-right: 1.6rem;
    content: "(";
    transform: translate(0px, -0.07em);
}
.small-hero-feature .BaseButton::after {
    padding-left: 1.6rem;
    content: ")";
    transform: translate(0px, -0.07em);
}

.small-hero-feature .BaseButton .inner {
    position: relative;
}

.small-hero-feature .BaseButton .inner::before {
        position: absolute;
        bottom: -0.3rem;
        left: 0px;
        width: 100%;
        height: 0.1rem;
        background-color: currentcolor;
        content: "";
        transform-origin: left top;
}

.latest-posts-div {
    overflow: hidden;
    grid-column: 1 / -1;
}

@media (min-width: 1024px) {
    .latest-posts-div {
        grid-column: span 9 / span 9;
    }
}

.latest-posts-div h3 {
    margin-bottom: 0.6rem;
}

.latest-posts-div .inner {
    display: flex;
}


.hero-section .large-feature {
    grid-column: 1 / span 2;
    grid-column: 2 / span 2;
    position: relative;
/*     transform: translate(0px, -17vh); */
/*     margin-top: min(8vh, 44rem); */

    grid-column: 3 / span 4;
    position: relative;
    margin-top: -26.7vw;
    margin-top: -16.7vw;
}

@media(min-width: 480px) {
    .hero-section .large-feature {
        grid-column: 3 / span 4;
    }
}
@media(min-width: 1024px) {
    .hero-section .large-feature {
        grid-column: 13 / span 12;
/*         margin-top: -47.5vh; */
    }
}

.large-feature .link-wrapper {
    display: block;
}


.featured-image-wrapper {
    position: relative;
    aspect-ratio: 1081 / 1351;
}

.featured-image-div {
    box-sizing: border-box;
    display: block;
    overflow: hidden;
    width: initial;
    height: initial;
    background: none;
    opacity: 1;
    border: 0px;
    margin: 0px;
    padding: 0px;
    position: relative;
}

.featured-image-div .image-sizer {
    box-sizing: border-box;
    display: block;
    width: initial;
    height: initial;
    background: none;
    opacity: 1;
    border: 0px;
    margin: 0px;
    padding: 124.977% 0px 0px;
    background: #1e1c23;
}

.featured-image-div img {
    position: absolute;
    inset: 0px;
    box-sizing: border-box;
    padding: 0px;
    border: none;
    margin: auto;
    display: block;
    width: 0px;
    height: 0px;
    min-width: 100%;
    max-width: 100%;
    min-height: 100%;
    max-height: 100%;
    object-fit: cover;


    transition: transform 0.75s cubic-bezier(0.215, 0.61, 0.355, 1);
    width: 100%;
    height: 100%;
    filter: blur(5px);
}

.feaured-image-placeholder-div {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: opacity 0.4s ease 0s, visibility 0s ease 0.4s;
    opacity: 0;
    visibility: hidden;
}

.feaured-image-placeholder-div img {
    transition: transform 0.75s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
    width: 100%;
    height: 100%;
    filter: blur(5px);
}


.MaskChild {
    transform: translate3d(0px, 100%, 0px);
    transition: transform 1.05s cubic-bezier(0.19, 1, 0.22, 1);
}

.StyledTextEffect {
    opacity: 0;
    transform: translate3d(0px, 20%, 0px);
    transition: 0.45s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.StyledTextEffectButton {
    opacity: 0;
    transform: translate3d(0px, 20%, 0px);
    transition: 0.45s cubic-bezier(0.645, 0.045, 0.355, 1) 0.1s;
}

.StyledTextEffect.visible, .StyledTextEffectButton.visible {
    opacity: 1;
    transform: translate3d(0px, 0px, 0px);
}

.MaskWrapper.visible .MaskChild {
    opacity: 1;
    transform: translate3d(0px, 0px, 0px);
}

.MaskImageWrapper {
    overflow: hidden;
}

.MaskImageContainer {
    transition: 1.35s cubic-bezier(0.19, 1, 0.22, 1);
    transform: translate3d(0px, 110%, 0px);
}

.MaskImageContainer.visible {
    transform: translate3d(0px, 0px, 0px);
}

.MaskImageContainer.visible img {
    filter: blur(0px);
    transition: 1.35s cubic-bezier(0.19, 1, 0.22, 1);
}