@font-face {
    font-family: "Freight Big";
    src: url("Freight Big Bold.otf") format("opentype");
    font-display: swap;
}

@font-face {
    font-family: "Franklin";
    src: url("Franklin Gothic Heavy Italic.ttf") format("opentype");
    font-display: swap;
}

@font-face {
    font-family: "choc";
    src: url("choc.ttf");
    font-display: swap;
}

@font-face {
    font-family: "Impact";
    src: url("Impact.ttf");
    font-display: swap;
}

@font-face {
    font-family: "Secuela";
    src: url("Secuela-ExtraBold.otf") format("opentype");
    font-display: swap;
}

@font-face {
    font-family: "Sans Forgetica";
    src: url("SansForgetica-Regular.otf");
    /* IE9 Compat Modes */
    font-display: swap;
}


@font-face {
    font-family: "Tech";
    src: url(Tech_Regular.otf) format("opentype");
    font-display: swap;
}

@font-face {
    font-family: "Rhubarb";
    src: url(Rhubarb-Regular.otf) format("opentype");
    font-display: swap;
}

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

html,
body {
    padding: 0;
    box-sizing: border-box;
    width: 100vw;
    background-color: #fff1e5;
    color: rgb(255, 241, 229);
    margin: 0;
    overflow: hidden;
    height: 100%
}

h1 {
    all: unset
}

p {
    margin-bottom: 2vh;
}

a {
    text-decoration: underline;
    color: white;
    transition: all 0.5s;
}

a:hover {
    color: red;;
}


.fakemedia {
position: fixed;
/* mix-blend-mode: overlay; */
pointer-events: none;
height: 100vh;
margin: auto;
z-index: 1;
background-image: linear-gradient(rgba(0,0,0,0), black);
width: 100vw;
}

#pissoir {background-image: linear-gradient(rgba(0,0,0,0), #4a412a); 
/* background:#4a412a ; */
}

#stzh {background-image: linear-gradient(rgba(0,0,0,0), blueviolet); }


.button {
    all: unset;
    cursor: pointer;
    width: 50%;
    margin: 0 25%;
    text-align: center;
    color: black;
    transition: all 0.3s;
}

.button:hover {
    color: blueviolet;
        background-image: linear-gradient(to left,
rgba(0, 0, 0, 0.66),
rgba(0, 0, 0, 0.33),
rgba(0, 0, 0, 0.1),
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.1),
rgba(0, 0, 0, 0.33),
rgba(0, 0, 0, 0.66));
}

::selection {
    color: yellow;
    background: blue;
    /* WebKit/Blink Browsers */
}

::-moz-selection {
    color: yellow;
    background: blue;
    /* Gecko Browsers */
}

:root::-webkit-scrollbar {
    display: none;
}

#container div,
#overlay #overlay2 {
    position: fixed;
    width: 100vw;
    height: 100vh;
    text-align: center;
    z-index: 1;
    overflow: hidden;
}

#overlay2 a {
    top: 43vh;
    position: relative;
    margin: auto;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}

#overlay2 img {
    bottom: 0;
    border-radius: 100px;
    max-height: 12vh;
    filter: invert();
    -webkit-filter: invert();
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}


#overlay2 img:hover {
    box-shadow: 0 0 1.5rem 0.2rem rgba(0, 0, 255, 1),
        0 0 1.5rem 0.8rem rgba(0, 255, 0, 1), 0 0 6vw 1.5vw rgba(255, 0, 0, 1);
    -webkit-box-shadow: 0 0 1.5rem 0.2rem rgba(0, 0, 255, 1),
        0 0 1.5rem 0.8rem rgba(0, 255, 0, 1), 0 0 6vw 1.5vw rgba(255, 0, 0, 1);
}



#overlay2 .label {
    opacity: 0;
    visibility: hidden;
    font-family: 'Times New Roman', Times, serif;
    position: fixed;
    width: fit-content;
    left: 55vw;
    font-style: italic;
    top: 46vh;
    margin: 0 5rem;
    color: white;
    font-size: 3rem;
    transition: 0.66s;
}

#overlay2 a:hover .label {
    visibility: visible;
    opacity: 1
}

/* LANDING PAGE */

canvas {
    mix-blend-mode: difference;
    width: 100vw;
    height: calc(var(--vh) * 100);
    left: 0vw;
    position: fixed;
    z-index: 0;
    pointer-events: none;   /* decorative bg — must not eat scroll/clicks over gaps */
}

.frame {
    display: flex;
flex-direction: column;
    position: absolute;
    width: 100%;
    height: calc(var(--vh) * 100);
    overflow-y: scroll;
}

.frame::-webkit-scrollbar{display: none;}

.contain {
    position: relative;
    width: min(1000px, 90%);
    height: fit-content;
    margin: calc(var(--vh) * 0) auto;
    padding-bottom: calc(var(--vh) * 20);
    /* border-left: 2px white solid; */
}

.contain img {
    width: 100%;
    height: auto;
}

.head {
position: sticky;
cursor: none;
top: 0vh;
margin-bottom: calc(var(--vh) * 10);
width: 100%;
font-family: 'Times New Roman', Times, serif;
color: rgba(255, 255, 255, 1);
opacity: 1;
font-size: 5vh;
color: white;
/* text-shadow: -1px -1px 0 rgb(0, 0, 0), 1px -1px 0 rgb(0, 0, 0), -1px 1px 0 rgb(0, 0, 0), 1px 1px 0 rgb(0, 0, 0); */
transition: all 0.3s;
font-style: italic;
text-align: center;
line-height: 6rem;
padding: 0.5rem 1rem;
/* background: transparent; */
/* backdrop-filter: blur(5px); */
/* -webkit-backdrop-filter: blur(5px); */
z-index: 5;
/* box-shadow: 0rem 0rem 1rem 0.1rem rgba(0, 2, 23, 0.66), 0rem 0rem 3rem 0.2rem rgba(41, 0, 8, 0.66), 0rem 0rem 20rem 10rem rgba(0, 21, 255, 0.33); */
/* -webkit-box-shadow: 0rem 0rem 1rem 0.1rem rgba(0, 2, 23, 0.66),
0rem 0rem 3rem 0.2rem rgba(41, 0, 8, 0.66),
0rem 0rem 10rem 10rem rgba(0, 21, 255, 0.33),; */
}


.head::after {
    content: "";
width: min(1000px, 90%);
position: absolute;
height: 2px;
background: linear-gradient(to left,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0.2),
white,
rgba(255, 255, 255, 0.2),
rgba(255, 255, 255, 0));
left: 50%;
transform: translateX(-50%);
bottom: 0;
transition: all 0.33s;
z-index: 10;
}

.head:hover {
mix-blend-mode: color-dodge;
}

.blurred-fade {
position: fixed;
overflow: hidden;
width: 100vw;
height: calc(var(--vh) * 20);
background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0));
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
/* filter: blur(10px); */
z-index: 3;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}

.blurred-fade::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: blur(10px); /* Maximum blur at the end */
    pointer-events: none;
    /* Adjust gradient direction and points to customize */
}

.poem {
    position: inherit;
    z-index: 2;
    mix-blend-mode: color-dodge;
    padding-left: 1rem;
    font-size: 2rem;
    line-height: 3rem;
    margin-bottom: calc(var(--vh) * 10);
    white-space: pre-wrap;
}

.show-scroll {
    position: inherit;
    text-align: center;
    width: 100%;
    z-index: 2;
    padding: calc(var(--vh) * 1);
}

.show-scroll img {
    width: 100%;
    height: auto;
    margin-top: calc(var(--vh) * 5);
    border: rgba(255,255,255,0.5) 1px solid;
    transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
}

#player {border: rgba(255,255,255,0.5) 1px solid;}

/* .show-scroll img:hover,
.boeing-embed:hover {
    width: 100%;
    margin-top: 5vh;
    border: rgba(255, 255, 0, 0.8) 1px solid;
    box-shadow: 0rem 0rem 1rem 0.1rem rgba(0, 2, 23, 0.66);
    -webkit-box-shadow: 0rem 0rem 1rem 0.1rem rgba(0, 2, 23, 0.66)
} */

.lighten {
    mix-blend-mode: lighten;
}

.fade-image, .mobile-imgs {
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100vw;
    height: calc(var(--vh) * 100);
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none;
    visibility: visible;
}

.mobile-imgs{visibility: hidden;}

.bio-paragraph {
   height: calc(var(--vh) * 48);
   margin-top: calc(var(--vh) * 2);
display: flex;
flex-direction: column;
}

.bio-button {
    cursor: pointer;
mix-blend-mode: overlay;
z-index: 2;
overflow: visible;
width: min(900px, 90%);
height: calc(var(--vh) * 12);
margin: 1vh auto;
/* height: 10vh; */
/* background: rgb(255, 255, 255); */
text-align: left;
position: relative;
    /* background-image: linear-gradient(to right, cyan, yellow, magenta); */
    /* border: solid white 1px; */
    /* box-shadow: 10px 10px 3px rgb(255, 255, 255, 1); */
    /* border-bottom: solid white 0px; */
    transition: all 1s;

}

.bio-button:hover {
    top: -10px;
    left: -10px;
    color: white;
    /* text-shadow: 10px 10px 10px #fff1e5; */
    /* border-bottom: solid white 1px; */
    /* border-radius: 10px; */
    /* box-shadow: 10px 10px 10px rgb(255, 255, 255, 1); */
    mix-blend-mode: color-dodge;
}

.bio-button:hover .query {
    color: yellow;
    text-shadow: -1px -1px 0 rgb(0, 0, 0), 1px -1px 0 rgb(0, 0, 0), -1px 1px 0 rgb(0, 0, 0), 1px 1px 0 rgb(0, 0, 0);
}

.everything {
    content: "";
position: fixed;
width: min(1200px, 90%);
    height: 2px;
    background: linear-gradient(to left,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0.2),
            white,
            rgba(255, 255, 255, 0.2),
            rgba(255, 255, 255, 0));

left: 50%;
transform: translateX(-50%);
transition: 0.3s all;
bottom: calc(var(--vh) * 3);
transition: all 0.33s;
z-index: 10;
mix-blend-mode: overlay;
}

.bio-button:hover ~ .everything {

        background: linear-gradient(to left,
            rgba(255, 255, 0, 0),
            rgba(255, 255, 0, 0.2),
            yellow,
            rgba(255, 255, 0, 0.2),
            rgba(255, 255, 0, 0));
    width: min(2000px, 100%);
    mix-blend-mode: color-dodge;
}

.container-i {
    mix-blend-mode: overlay;
z-index: 2;
/* cursor: pointer; */
width: min(400px, 50%);
height: fit-content;
margin: 0vh auto;
/* padding: 10vh; */
height: 33vh;
text-align: center;
position: relative;
font-size: 3rem;
background-size: contain;
background-image: url(../img/lingx.gif);
background-repeat: no-repeat;
background-position: center center;
}

/* .container-i:hover {
    mix-blend-mode: color-dodge;
    filter: blur(10px);
    transition: all 1s;
} */

.query {
    font-family: 'Times New Roman', Times, serif;
    color: rgba(255, 255, 255, 1);
    opacity: 1;
    font-size: calc(var(--vh) * 9);
    top: 0;
    color: black;
    text-shadow: -1px -1px 0 rgb(255, 255, 255), 1px -1px 0 rgb(255, 255, 255), -1px 1px 0 rgb(255, 255, 255), 1px 1px 0 rgb(255, 255, 255);
    transition: all 0.3s;
    /* text-shadow: -1px -1px 0 rgb(255, 0, 0), 1px -1px 0 rgb(0, 255, 0), -1px 1px 0 rgb(0, 0, 255); */
}


.ad-stick {
    /* cursor: pointer; */
    position: fixed;
    width: min(1000px, 90%);
    height: calc(var(--vh) * 10);
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    bottom: calc(var(--vh) * 3);
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    text-align: right;
    z-index: 5;
    font-size: unset;
    border: solid white 1px;
    transition: all 0.33s;
    overflow: hidden;
}

.close-button {cursor: pointer;}

.open-menu::-webkit-scrollbar {display: none;}

.ad-stick:hover {
    box-shadow: 0rem 0rem 3rem 0.2rem rgba(41, 0, 8, 0.99),
        0rem 0rem 15rem 1rem rgba(0, 21, 255, 0.33);
    -webkit-box-shadow: 0rem 0rem 3rem 0.2rem rgba(41, 0, 8, 0.99),
        0rem 0rem 15rem 1rem rgba(0, 21, 255, 0.33);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.ad-stick img {
    width: 30px;
    /* mix-blend-mode: color-dodge; */
    position: sticky;
    top: 0;
}

.open-menu {
    /* height: 96vh; */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow-y: scroll;
}

.purple-shade {
    box-shadow: 0rem 0rem 1rem 0.1rem rgba(0, 2, 23, 0.99),
        0rem 0rem 3rem 0.2rem rgba(41, 0, 8, 0.99),
        /* inset 0rem 2rem 5vw 0.2vw white, */
        0rem 0rem 15rem 3rem rgba(0, 21, 255, 0.66);
    -webkit-box-shadow: 0rem 0rem 1rem 0.1rem rgba(0, 2, 23, 0.99),
        /* inset 4rem 2rem 10vw 0.2vw white, */
        0rem 0rem 3rem 0.2rem rgba(41, 0, 8, 0.99),
        0rem 0rem 15rem 3rem rgba(0, 21, 255, 0.66);
}

.split-container {
    display: flex;
    justify-content: center;
    gap: 20px; /* Space between videos */
    flex-wrap: wrap; /* Stacks videos vertically on small screens */
    background-image: linear-gradient(to left,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0.3),
rgba(0, 0, 0, 0.4),
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.7),
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.4),
rgba(0, 0, 0, 0.3),
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0));
padding: calc(var(--vh) * 5) 0;
}

.split-container::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
background: linear-gradient(to left,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0.2),
rgba(255, 255, 255, 0.5),
white,
rgba(255, 255, 255, 0.5),
rgba(255, 255, 255, 0.2),
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0));
    bottom: calc(var(--vh) * 1);
    left: 0;
}

.split-container::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
background: linear-gradient(to left,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0.2),
rgba(255, 255, 255, 0.5),
white,
rgba(255, 255, 255, 0.5),
rgba(255, 255, 255, 0.2),
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0));
    top: calc(var(--vh) * 1);
    left: 0;
}

.split-video {
    flex: 1 1 300px; /* Width adjusts responsively */
    max-width: 45%; /* Limits to roughly half the screen on large screens */
    height: 650px;
}

.split-video iframe {
    width: 100%;
    height: 100%; /* Adjust based on desired height */
}


.note, .caption {
position: relative;
width: 100%;
/* margin: 5vh auto; */
/* margin-bottom: 10vh; */
height: fit-content;
box-sizing: border-box;
text-align: left;
padding: calc(var(--vh) * 3) 2vw;
/* border: 1px solid white; */
background-image: linear-gradient(to left,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0.3),
rgba(0, 0, 0, 0.4),
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.4),
rgba(0, 0, 0, 0.3),
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0));
font-family: Arial, Helvetica, sans-serif;
/* background: rgba(0,0,0,0.5); */
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
/* color: white; */
font-size: 1.5rem;
line-height: 1.5;
/* mix-blend-mode: color-dodge; */
z-index: 2;
}

.caption {
    text-align: center;
    padding: calc(var(--vh) * 2) 1vw;
    margin: calc(var(--vh) * 1) 0vw;
}

.caption:before,
.note:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
background: linear-gradient(to left,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0.2),
rgba(255, 255, 255, 0.5),
white,
rgba(255, 255, 255, 0.5),
rgba(255, 255, 255, 0.2),
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0));
    top: -2px;
    left: 0;
}

.caption::after,
.note::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -2px;
    left: 0;
}

.note::after{
    background: linear-gradient(to left,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0.2),
rgba(255, 255, 255, 0.5),
white,
rgba(255, 255, 255, 0.5),
rgba(255, 255, 255, 0.2),
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0));
}

.note i, .caption i {
    font-weight: bold;
}



.caption a {
    text-decoration: underline;
    color: initial;
}

.caption a:hover {
    color: red;
    font-style: italic;
}

.wagner {
    background-image: url(/img/screen.png);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-background-position: center;
    -moz-background-position: center;
    -o-background-position: center;
    background-position: center;
    background-color: #000;
}

.dock {
    position: fixed;
    display: flex;
    justify-content: space-between;
    width: 100vw;
    height: 10vh;
    z-index: 100;
}

.thankyou {
    position: relative;
    margin: auto;
    font-style: italic;
    height: 100%;
    width: 100%;
    color: red;
    text-align: center;
    font-size: 8rem;
}

.thankyou h1 {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -40%);
    z-index: 1000;
    line-height: 12rem;
    min-width: 60%;
    color: black;
    box-shadow: 0rem 0rem 8rem 0.6rem rgba(0, 2, 23, 0.8),
        0rem 0rem 3rem 0.3rem rgba(0, 3, 41, 0.7),
        0rem 0rem 12rem 3rem rgba(0, 21, 255, 0.6),
        0rem 0rem 15rem 7rem rgba(255, 0, 255, 0.7);
    -webkit-box-shadow: 0rem 0rem 8rem 0.6rem rgba(0, 2, 23, 0.8),
        0rem 0rem 3rem 0.3rem rgba(0, 3, 41, 0.7),
        0rem 0rem 12rem 3rem rgba(0, 21, 255, 0.6),
        0rem 0rem 15rem 7rem rgba(255, 0, 255, 0.7)
}

.thankyou a {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -80%);
    z-index: 1001;
    text-decoration: none;
    color: red;
    -webkit-transition: color 0.3s;
    /* For Safari 3.1 to 6.0 */
    transition: color 0.3s;
    margin-top: 4rem
}

.ty {
    mix-blend-mode: soft-light
}

.dock img {
    height: 100%;
    z-index: 999;
}

.dock-item {
    height: 100%;
}

label {
    width: fit-content
}

#vortex,
#mail {
    padding: 1.5rem;
    transition: 0.33s;
    -webkit-transition: 0.33s;
    z-index: 999;
}

.dock-item .label,
.contact-label {
    opacity: 0;
    visibility: hidden;
    font-family: 'Times New Roman', Times, serif;
    position: fixed;
    font-style: italic;
    bottom: -4vh;
    left: 2vw;
    margin: 0;
    color: none;
    text-shadow: -1px -1px 0 red, 1px -1px 0 red, -1px 1px 0 red,
        1px 1px 0 red;
    font-size: 25rem;
    transition: 0.66s
}

.contact-label {
    left: unset;
    right: 2vw;
}

#vortex:hover .label,
#mail:hover .contact-label {
    visibility: visible;
    opacity: 1
}

/* .dock-item:hover .label,.dock-item:hover .contact-label {
    filter: drop-shadow(0 0 0.33rem black);
  -webkit-filter: drop-shadow(0 0 0.33rem black);
} */


label {
    cursor: pointer;
}

.hide-link {
    height: 0%;
}

.ghost-link {
    position: relative;
    top: -35px;
    height: 100%;
    width: 96%;
    background: transparent;
    visibility: visible;
    transition: all 0.33s;
    cursor: pointer;
}

nav {

    display: block;
    text-align: left;
    line-height: 4rem;
    font-family: 'Times New Roman', Times, serif;
    font-size: 3rem;
    list-style: none;
    padding: 4vh 3vw;
    color: white;
    font-style: italic;
    z-index: 10;
    margin-bottom: 30vh;
    margin-top: -30vh;
}

nav a {
    /* cursor: grabbing; */
    text-decoration: none;
    color: aliceblue;
    z-index: 999;
    -webkit-transition: color 0.3s;
    /* For Safari 3.1 to 6.0 */
    transition: color 0.3s;
    padding-right: 1rem;
}

.show {
    display: block
}

.hide {
    display: none
}

nav>li {
    padding-top: 4rem;
    display: none;
}

nav>input {
    display: none
}

nav>div {
    display: none
}

nav>li>span {
    color: red
}

nav>li>a:hover {
    color: blue;
    font-style: unset;
    border-left: 1px solid blue;
}

.bio {
    position: relative;
}

.thankyou a:hover {
    color: yellow;
}

.bio a {
    padding: 0;
}

.bio a:hover {
    color: blue;
    font-style: unset;
}

nav>li>a:hover,
.thankyou a:hover {
    filter: invert(1);
    -webkit-filter: invert(1);
}

nav>li:before {
    opacity: 0;
    display: none;
    padding-right: 0.5rem;
}

nav>li:hover:before {
    content: "🕳️ ";
    opacity: 1;
    display: inline-block;
    vertical-align: middle;
}

.nav-toggle {
    display: none;
    transition: 0.3s;
}

.nav-toggle:checked~nav {
    display: block
}


.nav-toggle:checked~#vortex img {
    filter: invert(1);
    -webkit-filter: invert(1)
}

.tabs {
    position: sticky;
    display: flex;
    justify-content: space-between;
    left: 15vw;
    right: 15vw;
    top: 86vh;
    z-index: 1000;
    padding: 0 3vw;
    z-index: 2;
}

.nav-tags {
    width: 30vw;
    display: flex;
    justify-content: space-between;
}

.tag {
    border: none;
    background: none;
    font-family: Arial, Helvetica, sans-serif;
    color: yellow;
    font-size: 3rem;
    font-style: normal;
    /* margin-right: 2vw; */
    cursor: pointer;
    /* background: rgba(0, 0, 0, 0.66); */
    padding: 0.5rem 1rem;
    line-height: 3rem;
    /* border: 1px yellow solid; */
    /* transition only the colour — `all` also animated the hover-underline /
       text-underline-offset, which flashed a sliver while drawing in */
    transition: color 0.3s, font-style 0.3s;
}

.tag:last-of-type {
    margin-right: 0;
}
.tag:first-of-type {
    padding-left: 0;
}

.tag:hover,
.active {
    /* background-color: rgba(0, 0, 0, 1); */
    /* border: 1px red solid; */
    color: red;
    font-style: italic;
}

.black-fade{
background-image: linear-gradient(rgba(0,0,0,0), black);
height: 33%;
position: sticky;
position: sticky;
top: 63vh;
padding: 0 3vw;
z-index: 2;
pointer-events: none;
}

.bio-img {
background-image: url(/img/IMG_2224.gif);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-background-position: center;
-moz-background-position: center;
-o-background-position: center;
background-position: center;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0.15;
pointer-events: none;
z-index: -1;
}


input {
    background: transparent;
    padding: 0.5rem 1rem;
    font-family: inherit;
    font-size: inherit;
    caret-color: yellow;
    line-height: 3rem;
    color: yellow;
    border: 1px yellow solid;
    border-radius: 0;
    transition: 0.3s;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.search-bar {
    top: 3vw;
    width: 16vw;
    min-width: 75px;
    position: sticky;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.search-bar::placeholder,
#email-input::placeholder {
    color: rgba(255, 255, 0, 0.33);
}

.search-bar:focus,
.search-bar:hover,
#email-input:focus,
#email-input:hover {
    background: none;
    border: none;
    outline: none;
    color: yellow;
    border: red 1px solid;
}

.search-bar:focus {
    width: 100%;
    /* border-bottom-right-radius: 33%;
    border-top-left-radius: 33%; */
}

#subscribeform {
    display: flex;
    justify-content: space-between;
    width: 90%;
    padding-top: 4rem
}

#email-input {
    width: 100%
}

#submit {
    border: none;
    cursor: pointer;
    backdrop-filter: unset;
    -webkit-backdrop-filter: unset;
}

#submit:hover {
    color: red
}


#progress {
    position: fixed;
    left: 19vw;
    width: 1px;
    height: 100%;
    background: red;
    z-index: 100
}

.scroll {
    padding: 15rem 0;
    padding-right: 1vw;
    padding-left: 1vw;
    width: 60vw;
    text-indent: none;
    position: absolute;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 auto;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.3rem;
    line-height: 2.5rem;
    text-align: left;
    border-left: 1px solid rgba(94, 255, 0, 0.8);
    background-color: rgba(15, 0, 10, 0.95);
    box-shadow: 0vw 0 20vw 4vw rgba(0, 0, 0, 0.7),
        0vw 0 10vw 10vw rgba(55, 0, 255, 0.9);
    -webkit-box-shadow: 0 0 5vw 4vw rgba(0, 0, 0, 0.7),
        0 0 10vw 10vw rgba(55, 0, 255, 0.9);
}

.scroll img {
    width: 60%;
    display: block;
    position: relative;
    margin: 5rem auto;
    border: 1px red solid;
    text-align: center;
    box-shadow: 0 0 1rem 0.2rem rgba(0, 0, 0, 0.9),
        0 0 4rem 2.5rem rgba(170, 120, 250, 0.2);
    -webkit-box-shadow: 0 0 1rem 0.2rem rgba(0, 0, 0, 0.9),
        0 0 4rem 2.5rem rgba(170, 120, 250, 0.2);
}

.centre {
    text-align: center;
}

.credits {
    text-align: center;
}

.credits i {
    font-family: 'Times New Roman', Times, serif;
    color: red;
}

.x {
    position: fixed;
    width: 75%;
    top: 50%;
    left: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.x img {
    width: 100%;
}


.container {
    margin: auto;
    height: 100%;
    width: 100vw;
    z-index: 2;
    position: relative;
    padding: 10rem 0;
    overflow-x: hidden;
    overflow-y: scroll;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
}

.container .container2::-webkit-scrollbar {
    width: 0 !important;
}

.container2 {
    position: relative;
    margin: auto;
    max-width: 800px;
    padding: 10rem 2rem;
    margin-bottom: 5rem;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2rem;
    line-height: 2rem;
    text-align: center;
}

.container2>img {
    margin: 2rem 0;
    width: 99%;
    border: 1px solid blue;
    transition: 0.5s ease-in-out;
    -webkit-transition: 0.5s ease-in-out;
    box-shadow: 0 0 1rem 1rem rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 0 1rem 1rem rgba(0, 0, 0, 0.4);
}

.container2>img:hover {
    border: 1px solid red;
    width: 97%;
    box-shadow: 0 0 0.5rem 0.5rem rgba(0, 0, 255, 0.6);
    -webkit-box-shadow: 0 0 0.5rem 0.5rem rgba(0, 0, 255, 0.6);
}

.pb-2 {
    padding-bottom: 2rem
}

#scroll {
    width: 100%;
    font-size: 2rem;
    line-height: 3rem;
}

.stills {
    padding: 5rem 2rem;
    padding-bottom: 10rem
}

.tooltip {
    font-size: 1.5rem;
    font-style: italic;
    position: absolute;
    color: yellow;
    padding: 1px;
    /* border-radius: 8px; */
    text-shadow: -1px -1px 0 rgb(0, 0, 0), 1px -1px 0 rgb(0, 0, 0), -1px 1px 0 rgb(0, 0, 0), 1px 1px 0 rgb(0, 0, 0);
    display: none;
    z-index: 1000;
}

.sinopse {
    padding: 1rem 2rem;
    margin-bottom: 0;
}

#back {
    font-family: Arial, Helvetica, sans-serif;
    position: fixed;
    cursor: pointer;
    writing-mode: tb;
    top: 50%;
    margin-right: 2rem;
    right: 0;
    font-size: 3rem;
    z-index: 99;
    transform: translate(0, -50%);
}

#back a {
    text-decoration: none;
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
    color: rgba(255, 255, 0, 0.9);
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
        1px 1px 0 #000;
    -webkit-transition: color 0.5s;
    /* For Safari 3.1 to 6.0 */
    transition: color 0.5s;
}

#back a:hover {
    color: blue;
}

.footer {
    position: fixed;
    height: 7vh;
    height: calc(var(--vh, 1vh) * 7);
    padding-bottom: 1vh;
    padding-bottom: calc(var(--vh, 1vh) * 1);
    width: 100vw;
    bottom: 0;
    z-index: 99;
    white-space: nowrap;
    color: rgb(255, 255, 0);
    font-family: Arial, Helvetica, sans-serif, serif;
    font-size: 2.2rem;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
        1px 1px 0 #000;
}

.blur-l {
    height: 100%;
    left: -1%;
    width: 1%;
    box-shadow: 0 0 4rem 4rem #fff1e5;
    position: fixed;
    z-index: 1
}

.blur-r {
    height: 100%;
    left: 100%;
    width: 1%;
    box-shadow: 0 0 4rem 4rem #fff1e5;
    position: fixed;
    z-index: 1
}

.poem-title {
    height: 25%;
    font-size: 20vh;
    color: rgba(255, 255, 0, 0.1);
    text-shadow: 0.3rem 0.3rem 0.6rem rgba(226, 200, 255, 0.25);
    font-family: serif;
    pointer-events: none;
}

.current {
    color: yellow;
}

#gifslayer {
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 6;
    pointer-events: auto;
    backface-visibility: hidden
}

#gifslayer div {
    transition: 0.33s all;
    pointer-events: all
}

#gifslayer img {
    width: 100%;
}

.g img {
    width: 100%;
}

.g {
    position: absolute;
    font-weight: bold;
    text-align: center;
    color: white;
    max-width: 700px;
    font-size: 3rem;
    box-shadow: 0 0 3rem 0.5rem #100;
    -webkit-box-shadow: 0 0 3rem 0.5rem #100;
    cursor: pointer
}

.g iframe {
    width: 100%;
    height: 30%
}

.b-side {
    display: none
}

#quote {
    width: 100%;
    margin: 10rem 0;
    /* background-image: -webkit-linear-gradient(rgba(255, 255, 0, 0),
            rgba(255, 255, 0, 0.9),
            rgba(255, 255, 0, 0)); */
}

.entered {
    -webkit-animation: slide-in-blurred-right 2s cubic-bezier(0.23, 1, 0.32, 1) 0s both;
    animation: slide-in-blurred-right 2s cubic-bezier(0.23, 1, 0.32, 1) 0s both;
}

.entered2 {
    -webkit-animation: slide-in-blurred-left 2s cubic-bezier(0.23, 1, 0.32, 1) 0s both;
    animation: slide-in-blurred-left 2s cubic-bezier(0.23, 1, 0.32, 1) 0s both;
}

.left-bar {
    width: 1px;
    height: 100vh;
    position: fixed;
    mix-blend-mode: plus-lighter;
    top: 0;
    z-index: 1;
    pointer-events: none;
    background: white;
    box-shadow: 0 0 2vw 3vw rgba(255, 255, 255, 1);
    -webkit-box-shadow: 0 0 2vw 3vw rgba(255, 255, 255, 1);
}

.right-bar {
    width: 1px;
    height: 100vh;
    position: fixed;
    mix-blend-mode: plus-lighter;
    top: 0;
    right: 0;
    z-index: 1;
    pointer-events: none;
    background: white;
    box-shadow: 0 0 2vw 3vw rgba(255, 255, 255, 1);
    -webkit-box-shadow: 0 0 2vw 3vw rgba(255, 255, 255, 1);
}

.content {
    text-align: right;
    text-align: -webkit-right;
    margin-bottom: 3rem;
}

article>.content {
    text-align: left;
}

h6 {
    font-size: 3rem;
    line-height: 3.5rem;
    font-family: "Rhubarb";
    color: black;
    display: inline-block;
    margin: 0;
    max-width: 1200px;
}

h6 span {
    background: white;
    padding: 0.5rem;
}

h5 {
    font-size: 1rem;
    font-family: "Tech";
    color: black;
    display: inline-block;
    margin: 0;
    font-weight: normal;
}

h5 span {
    background: white;
    padding: 0.5rem;
}

.embed-container {
    position: relative;
    z-index: -1;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.boeing-embed {
    margin: 5vh 0 0 0;
    border: 1px solid white;
    transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.mb-15 {
    margin-bottom: 15rem;
}



@keyframes scroll {
    0% {
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
    }

    100% {
        transform: translate(-100%, 0);
        -webkit-transform: translate(-100%, 0);
    }
}

@keyframes blink {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* Keyframes for fade effect */
@keyframes fadeInOut {
    0% { opacity: 0; }
    20% { opacity: 1; }
    50% { opacity: 1; }
    70% { opacity: 0; }
    100% { opacity: 0; }
}

/* ----------------------------------------------
 * Generated by Animista on 2020-8-17 9:18:35
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-blurred-left
 * ----------------------------------------
 */


@keyframes slide-in-blurred-left {
    0% {
        -webkit-transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
        transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
        -webkit-transform-origin: 100% 50%;
        transform-origin: 100% 50%;
        -webkit-filter: blur(100px);
        filter: blur(100px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0) scaleY(1) scaleX(1);
        transform: translateX(0) scaleY(1) scaleX(1);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1;
    }
}

/* ----------------------------------------------
 * Generated by Animista on 2020-8-17 16:46:18
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-blurred-right
 * ----------------------------------------
 */


@keyframes slide-in-blurred-right {
    0% {
        -webkit-transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
        transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
        -webkit-transform-origin: 0% 50%;
        transform-origin: 0% 50%;
        -webkit-filter: blur(100px);
        filter: blur(100px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0) scaleY(1) scaleX(1);
        transform: translateX(0) scaleY(1) scaleX(1);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1;
    }
}


@media screen and (max-width: 850px) {
    .fade-image{visibility: hidden;}
    .mobile-imgs{visibility: visible;}
    .head {
        font-size: 2rem;
        line-height: 3rem;
        padding: 1rem;
    }

    .poem {
        font-size: 1.3rem;
        line-height: 1.95rem;
        padding-left: 0.5rem;
    }


    .note {
        font-size: 1rem;
        padding:  calc(var(--vh) * 3) 3vw;
        margin:  calc(var(--vh) * 4) auto;
    }

    .smaller-button {
        font-size: 4rem;
    }

    .button {
        width: 70%;
        margin: 5% 15%;
    }

    .bio-button {
        height: calc(var(--vh) * 13);
        mix-blend-mode: color-dodge;
    }

    .query {
        font-size:  calc(var(--vh) * 7);
        color: lightyellow;
        text-shadow: -1px -1px 0 rgb(0, 0, 0), 1px -1px 0 rgb(0, 0, 0), -1px 1px 0 rgb(0, 0, 0), 1px 1px 0 rgb(0, 0, 0);
    }

    #overlay2 a {
        top:  calc(var(--vh) * 70);
    }

    #overlay2 img {
        max-height:  calc(var(--vh) * 16);
    }

    .mb-15 {
        margin-bottom:  calc(var(--vh) * 10);
    }

    #overlay2 .label {
        opacity: 1;
        visibility: visible;
        display: block;
        top: 90vh;
        margin: 0;
        font-size: 1.5rem;
        left: 40vw
    }

    #overlay2 a:hover .label {
        display: block
    }

    .footer {
        height: 8vh;
        height: calc(var(--vh, 1vh) * 8);
        font-size: 1.4rem;
    }

    .dock {
        height: 18vw;
    }


    .container-txt {
        width: 100vw;
    }


    .scroll {
        width: fit-content;
        font-size: 1rem;
        line-height: 2rem;
        padding: 8rem 3rem;
    }

    .thankyou h1 {
        top: 40%;
        transform: translate(-50%, -40%);
        font-size: 3rem;
        line-height: 6rem;
        min-width: 100%;
    }

    .thankyou a {
        font-size: 4rem;
        margin-top: 0
    }

    .ty {
        width: 100%
    }

    .tooltip {visibility: hidden;}

    nav {
        /* height: fit-content; */
        line-height: 2rem;
        font-size: 1.5rem;
        padding: 3vw;
        left: 0;
        box-sizing: border-box;
    }

    nav>li {
        padding-top: 3rem;
    }

    nav>li:before,
    nav>li:hover:before {
        opacity: 1;
        font-size: 1.4rem;
        color: red;
        vertical-align: middle;
    }

    .nav-tags {
        width: 60vw;
        padding: 0rem;
    }

    .show-scroll {
        padding: 0;
    }

    .tag {
        font-size: 1.5rem;
        padding: 0.5rem;
        line-height: 1rem;
        /* background-color: rgba(0, 0, 0, 0.6); */
    }

    .tabs {
        left: 0;
        right: 0;
        top:  calc(var(--vh) * 86);
    }

    /* #all-tag {
        display: none;
    } */

    .search-bar {
        width: 15vw;
        min-width: 100px;
        padding: 0.5rem;
        line-height: 2rem;
    }

    .search-bar:focus {
        width: 66vw;
    }

    .sixty-vh {
        height: 35vh
    }

    .container2 {
        padding: 3rem 2rem;
        margin-bottom: 2rem;
    }

    .container2>img {
        margin: 0.5rem;
    }

    .container {
        padding-top: 8rem;
    }


    .container-txt-img {
        width: 40vw;
    }

    h5 {
        font-size: 0.6rem;
    }

    h6 {
        font-size: 1.2rem;
        line-height: 1.8rem;
    }

    #quote {
        margin: 6rem 0;
    }

    #quote:last-child {
        margin-bottom:  calc(var(--vh) * 12);
    }

    .split-container {
padding: 0;
}

    .caption {
        font-size: 1rem;
        line-height: 1.4rem;
        margin-bottom: 2rem;
    }

.split-video {
    height: 450px;
}

.split-container::before{
    top: calc(var(--vh) * 0);
}
.split-container::after{
    bottom: calc(var(--vh) * 0);
}
    .granary-embed {
        margin: 0 2rem;
        margin-bottom: 10rem;
    }

    .left-bar,
    .right-bar {
        width: 1px;
        box-shadow: 0 0 1rem 1.2rem rgba(255, 255, 255, 0.9);
        -webkit-box-shadow: 0 0 1rem 1.2rem rgba(255, 255, 255, 0.9);
    }

    article>.content {
        padding-left: unset;
    }

    section>.content {
        padding-right: unset;
    }

    #gifslayer>div {
        pointer-events: none
    }

    .dock-item .label {
        font-size: 30vw;
    }

    .stills {
        padding: 2rem 2rem;
        padding-bottom: 10rem
    }

}

/* ============================================================
   Accessibility + polish (added in the enhancement pass)
   ============================================================ */

/* Skip link: hidden until focused */
.skip-link {
    position: fixed;
    top: -100px;
    left: 1rem;
    z-index: 10000;
    background: #000;
    color: yellow;
    padding: 0.6rem 1rem;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    transition: top 0.2s;
}
.skip-link:focus {
    top: 1rem;
    color: yellow;
}

/* Screen-reader-only */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Reset native control chrome on the elements that became <a>/<button> */
a.bio-button {
    display: block;
    text-decoration: none;
    color: inherit;
}
button.bio-button,
button.menu-trigger {
    background: transparent;
    border: 0;
    font: inherit;
    color: inherit;
    width: min(900px, 90%);
}
button.close-button {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    /* The button (direct child of the scrolling menu) must be the sticky
       element — the inner <img> can only stick within the button's own box. */
    position: sticky;
    top: 0;
    z-index: 10;
}
button.ghost-link {
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    display: block;
}

/* Visible focus for keyboard users (mouse focus stays clean) */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid yellow;
    outline-offset: 2px;
}

/* Image fade-in: images start dim, settle once decoded.
   Scoped to html.js so that without JS the images are always visible. */
html.js .contain img {
    opacity: 0;
    transition: opacity 0.6s ease;
}
html.js .contain img.is-loaded {
    opacity: 1;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .contain img { opacity: 1; }
    .entered, .entered2 { animation: none !important; }
}

/* ============================================================
   SPACING RHYTHM — applied to all work pages (.contain.rhythm).
   Consistent gap between top-level sections, a larger "breath" after
   the title, and a tighter rhythm within galleries. Remove this block
   (and the `rhythm` class in work.php) to revert.
   ============================================================ */
.contain.rhythm {
    --space-section: calc(var(--vh) * 8);   /* between sections */
    --space-head:    calc(var(--vh) * 12);  /* after the title */
}
/* one uniform gap between every top-level section */
.contain.rhythm > * + * {
    margin-top: var(--space-section);
}
/* title gets a deliberate larger pause */
.contain.rhythm > .head {
    margin-bottom: 0;
}
.contain.rhythm > .head + * {
    margin-top: var(--space-head);
}
/* let the section gap (not the element's own padding) own the spacing */
.contain.rhythm > .show-scroll {
    padding-top: 0;
    padding-bottom: 0;
}
/* kill the double gap: first item in a gallery shouldn't add its own top margin */
.contain.rhythm .show-scroll > :first-child {
    margin-top: 0;
}
/* poems carry their own bottom margin — let the section gap own spacing instead */
.contain.rhythm > .poem {
    margin-bottom: 0;
}

/* Hovering a work in the menu underlines its applicable category buttons
   (toggled by tag_filter.js via the .cat-hover class) */
.tag.cat-hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.35rem;
}

/* Category tags read as a list — the comma is presentation, not content
   (so the CMS tag labels stay clean). The 🥱 button is outside .nav-tags. */
.nav-tags .tag::after {
    content: ",";
}

/* Hover-reveal "and" to the left of the bottom menu bar (desktop only).
   Mirrors the landing page's "and" (.query): Times serif, italic, white-outlined. */
.ad-and {
    position: fixed;
    bottom: calc(var(--vh) * 3);
    right: calc(50% + min(500px, 45%) + 0.6rem); /* right edge sits just left of the centred bar */
    height: calc(var(--vh) * 10);                /* match the bar height */
    display: flex;
    align-items: center;
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
    font-size: calc(var(--vh) * 9);
    line-height: 1;
    color: black;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    white-space: nowrap;
    pointer-events: none;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transform: translateX(12px);
    transition: opacity 0.33s, transform 0.33s, visibility 0.33s;
    z-index: 6;
}

#ad-menu:not(.open-menu):hover ~ .ad-and {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

@media (max-width: 767px) {
    .ad-and { display: none; }
}

/* "(by …)" credit shown next to a work title when it's primarily someone
   else's work — smaller and lighter than the title it follows. */
.by-credit {
font-size: 0.6em;
font-style: normal;
opacity: 1;
/* color: red; */
}

/* Gentle cross-document fade between pages (progressive enhancement;
   browsers without support just navigate normally, and it respects
   prefers-reduced-motion automatically). */
@view-transition { navigation: auto; }

/* 404 page — landing-style type (big italic Times, white-outlined) over the plasma. */
.error-page {
    position: relative;
    z-index: 2;
    width: min(1000px, 90%);
    margin: auto;
    padding: calc(var(--vh) * 22) 0;
}
.error-page p {
font-family: 'Times New Roman', Times, serif;
font-style: italic;
font-size: calc(var(--vh) * 9);
line-height: 1.05;
color: black;
/* text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; */
margin-bottom: calc(var(--vh) * 6);
mix-blend-mode: overlay;
}
.error-page a { color: black; text-shadow: inherit; text-decoration: none; }
.error-page a:hover { color: red; mix-blend-mode: color-dodge; }