*, ::before, ::after { box-sizing: border-box; }
   ::before, ::after { pointer-events: none; }

html {
    height: 100dvh;
    font-size: 10px;
    overflow-x: hidden;
    
    
    /* ---------------------
        THEME CUSTOMIZATION
       --------------------- */
    /* Fonts */
    /* Add/remove/modify font files in the fonts folder located in the assets folder */
    /* Add/remove/modify font declarations using "fonts.css" in the assets folder */
    --page-font:      "Cabin";
    --header-font:    "Epunda Slab";
    --subheader-font: "Patrick Hand";
    
    /* Headers */
    --global-header-size: 4rem;
    --global-footer-size: 2rem;
    
    --header-size:    3rem;
    --subheader-size: 1.25em;
    
    /* Background */
    --background-size:     15%;
    --background-opacity:  .2;
    --background-pattern:  url("media/background.png");
    --background-position: center;
    --background-gradient: linear-gradient(#c6c6c6, #8c8c8c);
    
    /* Footer */
    /* You can swap left-image and right-image with URL to images
       If you want to use SVGs, convert SVG(s) of choice to Base64
       Add to variable(s) in "clips.css" file in the assets folder
       Set variable(s) in place of left-flower-patch or right-flower-patch */
    --global-footer-left-image:  var(--left-flower-patch);
    --global-footer-left-width:  313px;
    --global-footer-left-height: 133px;
    
    --global-footer-right-image:  var(--right-flower-patch);
    --global-footer-right-width:  267px;
    --global-footer-right-height: 136px;
    
    /* Character polaroids */
    --polaroid-base-gradient:  linear-gradient(#e5e5e5, #d3d3d3);
    --polaroid-hover-gradient: linear-gradient(#f5f5f5, #c2c2c2);
    
    /* Dropshadows */
    /* Customize global dropshadows here.
       You can modify parameters per element too.
       Copy-and-paste box-shadow template below.
       box-shadow: var(--shadow-params) rgba(var(--shadow-color), var(--shadow-opacity)); */
    --shadow-params:   0 0 1em 0; /* X coord, Y coord, Blur factor, Spread factor */
    --shadow-color:    0, 0, 0; /* RGB */
    --shadow-opacity: .5; /* 0 to 1 scale */
    
    /* Dropdown lists */
    /* For use on chapter and page dropdowns
       This determines maximum height list will
       go to before you have to start scrolling.
       Please do not remove or set to super high number. */
    --dropdown-list-height: 35vh;
    
    /* Page modules */
    /* For use on About/Cast/Archive pages */
    --module-width: 25%;
    
    /* Miscellaneous */
    --global-border-radius: .5rem;
    
    --global-page-width:   50%;
    --comic-page-width:    75%;
    --page-controls-width: 65%;
    
    
    /* ---------------------
        COLOR CUSTOMIZATION
       --------------------- */
    /* Disabled links */
    --disabled-gradient: linear-gradient(#62646d, #76787f);
    
    /* Light palette */
    --light-light-color:     #ffffff;
    --light-primary-color:   #e5e5e5;
    --light-secondary-color: #d3d3d3;
    
    --light-base-gradient: linear-gradient(var(--light-light-color), var(--light-primary-color));
    
    /* Dark palette */
    --dark-dark-color:    #000000;
    --dark-light-color:   #242936;
    --dark-primary-color: #1a1b21;
    
    --dark-base-gradient: linear-gradient(var(--dark-primary-color), var(--dark-dark-color));
    
    /* Accent palette */
    --accent-dark-color:      #770013;
    --accent-light-color:     #ff4f1d;
    --accent-primary-color:   #ca0002;
    --accent-secondary-color: #df1200;
    --accent-tertiary-color:  #a9000d;
    
    --accent-base-gradient:   linear-gradient(var(--accent-light-color), var(--accent-primary-color));
    --accent-active-gradient: linear-gradient(var(--accent-tertiary-color), var(--accent-secondary-color));
    --accent-dark-gradient:   linear-gradient(var(--accent-primary-color), var(--accent-dark-color));
    
}

body {
    position: relative;
    margin: 0;
    margin-bottom: env(safe-area-inset-bottom);
    min-height: -webkit-fill-available;
    
    background: var(--background-gradient) no-repeat fixed;
    font-family: var(--page-font);
    font-size: 2rem;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

body:before {
    z-index: -1;
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--background-pattern) var(--background-position) / var(--background-size) fixed;
    -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
    mask-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
    opacity: var(--background-opacity);
}

a {
    color: var(--accent-primary-color);
    font-weight: bold;
    letter-spacing: 1px;
    text-decoration: underline;
    transition: color .3s ease;
}

a:hover { color: var(--accent-light-color); }
img     { display: block; }

button {
    font-size: 1.65rem;
    border: none;
}

section.data-container > .container-header {
    margin: 0;
    padding: .25em .5em;
    background: var(--dark-base-gradient);
    color: var(--light-light-color);
    border: 1px solid var(--dark-dark-color);
    border-top-width: 2px;
    border-radius: var(--global-border-radius) var(--global-border-radius) 0 0;
    font-size: .8em;
}

section.data-container > .container-header a {
    color: inherit;
    font-weight: normal;
}

section.data-container > .container-header a:hover { color: var(--light-secondary-color); }
section.data-container p  { margin: 0; }

section.data-container > .container-content {
    padding: .5em;
    background: #ffffff;
    border: 5px solid var(--dark-dark-color);
    border-top-width: 0;
    border-radius: 0 0 var(--global-border-radius) var(--global-border-radius);
}



/* ---------
    GENERAL
   --------- */
main#content-wrapper {
    z-index: 0;
    position: relative;
    padding: calc(var(--global-header-size) + 1rem) 0 calc(var(--global-footer-size) + 1rem) 0;
    width: var(--global-page-width);
    min-height: 100dvh;
    background: #eaeaea;
    border: 2px solid #6f6f6f;
    box-shadow: var(--shadow-params) rgba(var(--shadow-color), var(--shadow-opacity));
    display: flex;
    flex-direction: column;
    align-items: center;
    
    flex: 1;
}

section > header {
    --ribbon-overhang: .75em;
    
    position: absolute;
    width: calc(100% + (2 * var(--ribbon-overhang)));
    height: calc(var(--header-size) + 1.5rem);
    
    background-image: var(--accent-base-gradient), var(--accent-dark-gradient);
    border: 2px solid transparent;
    border-radius: var(--global-border-radius) var(--global-border-radius) calc(var(--global-border-radius) / 2) calc(var(--global-border-radius) / 2);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    
    color: #ffffff;
    font-family: var(--header-font);
    font-size: var(--header-size);
    font-weight: bold;
    line-height: calc(var(--header-size) + 1.5rem);
    text-align: center;
    text-shadow: rgb(119, 0, 19) 2px 0px 0px, rgb(119, 0, 19) 1.75517px 0.958851px 0px, rgb(119, 0, 19) 1.0806px 1.68294px 0px, rgb(119, 0, 19) 0.141474px 1.99499px 0px, rgb(119, 0, 19) -0.832294px 1.81859px 0px, rgb(119, 0, 19) -1.60229px 1.19694px 0px, rgb(119, 0, 19) -1.97998px 0.28224px 0px, rgb(119, 0, 19) -1.87291px -0.701566px 0px, rgb(119, 0, 19) -1.30729px -1.5136px 0px, rgb(119, 0, 19) -0.421592px -1.95506px 0px, rgb(119, 0, 19) 0.567324px -1.91785px 0px, rgb(119, 0, 19) 1.41734px -1.41108px 0px, rgb(119, 0, 19) 1.92034px -0.558831px 0px;
    box-sizing: content-box;
}

section > header:before, section > header:after {
    z-index: -1;
    content: '';
    position: absolute;
    bottom: calc(var(--ribbon-overhang) * -.5 - 2px);
    width: var(--ribbon-overhang);
    height: calc(var(--ribbon-overhang) * .5);
    border-top: calc(var(--ribbon-overhang) * .5) solid var(--accent-dark-color);
}

section > header:before {
    left: 0;
    border-left: var(--ribbon-overhang) solid transparent;
}

section > header:after {
    right: 0;
    border-right: var(--ribbon-overhang) solid transparent;
}

section > header + * {
    margin-top: calc(var(--header-size) + 3rem);
}

section > subheader:before,
section > subheader:after {
    content: "";
    position: absolute;
    top: 25%;
    margin: 0 .5em;
    width: 156px;
    height: 20px;
    pointer-events: none;
}

section > subheader:before {
    right: 100%;
    margin-left: -76px;
    border-image: var(--left-header-swirl) 24 / 32px 48px 0 48px;
}

section > subheader:after {
    left: 100%;
    margin-right: -76px;
    border-image: var(--right-header-swirl) 24 / 32px 48px 0 48px;
}

section > subheader {
    position: relative;
    width: fit-content;
    font-family: var(--subheader-font);
    font-size: var(--subheader-size);
    font-weight: bold;
    text-align: center;
    justify-self: center;
    display: block;
}

section.wrapper {
    padding-top: .3em;
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5em;
}

section p {
    margin: 0;
    margin-bottom: 1em;
}



/* -------------------
    GLOBAL NAVIGATION
   ------------------- */
nav#global {
    z-index: 100;
    position: fixed;
    top: 0;
    width: 100%;
    height: var(--global-header-size);
    
    background: var(--dark-base-gradient);
    box-shadow: inset 0 -2px 0 var(--dark-light-color),
                var(--shadow-params) rgba(var(--shadow-color), var(--shadow-opacity));
    font-family: var(--header-font);
    line-height: .8em;
    
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

nav#global > section {
    padding: 0 1em;
    overflow: hidden;
}

nav#global a {
    position: relative;
    padding: .5em;
    color: #ffffff;
    font-size: calc(var(--global-header-size) / 2);
    font-weight: normal;
    text-decoration: none;
    transition: color .1s ease;
    
    display: flex;
    justify-content: center;
    align-items: center;
}

nav#global #links-wrapper #dropdown {
    position: relative;
    width: var(--global-header-size);
    height: var(--global-header-size);
    color: var(--light-light-color);
    font-size: calc(var(--global-header-size) * .75);
    line-height: var(--global-header-size);
    cursor: pointer;
    display: none;
    
    transition: color .1s ease;
}

nav#global #links-wrapper #dropdown:before,
nav#global #links-wrapper #dropdown:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

nav#global #links-wrapper #dropdown:before {
    z-index: -2;
    background: var(--accent-base-gradient);
    transition: opacity .6s ease;
}

nav#global #links-wrapper #dropdown:after {
    z-index: -1;
    background: var(--accent-active-gradient);
    box-shadow: inset 0 -2px 0 var(--accent-tertiary-color);
    transition: opacity .1s ease;
}

nav#global #links-wrapper #dropdown:active {
    color: #d8d8d8;
    text-shadow: 0 -1px var(--accent-dark-color), 0 1px var(--accent-light-color);
}

nav#global #links-wrapper #dropdown:hover:before,
nav#global #links-wrapper #dropdown:active:after {
    opacity: 1;
}

nav#global #links {
    height: 100%;
    display: flex;
    flex-direction: row;
}

nav#global #links > a:active {
    color: #d8d8d8;
    text-shadow: 0 -1px var(--accent-dark-color), 0 1px var(--accent-light-color);
}

nav#global #links > a:before,
nav#global #links > a:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

nav#global #links > a:before {
    z-index: -2;
    background: var(--accent-base-gradient);
    transition: opacity .6s ease;
}

nav#global #links > a:after {
    z-index: -1;
    background: var(--accent-active-gradient);
    box-shadow: inset 0 -2px 0 var(--accent-tertiary-color);
    transition: opacity .1s ease;
}

nav#global #links > a:hover:before,
nav#global #links > a:focus:before,
nav#global #links > a:active:after {
    opacity: 1;
}

nav#global #name {
    --flower-size: calc(var(--global-header-size) * 3);
    
    position: relative;
    padding-left: 0;
    padding-right: 5em;
}

nav#global #name a {
    padding: 0 0 0 3rem;
    height: var(--global-header-size);
    font-size: calc(var(--global-header-size) * .75);
    line-height: 1.3;
    display: inline-block;
}

nav#global #name a:before,
nav#global #name a:after {
    content: "";
    position: absolute;
    top: 0;
    right: calc(100% + var(--flower-size));
    width: calc(100% + var(--flower-size));
    height: var(--global-header-size);
}

nav#global #name a:before {
    z-index: -1;
    background: var(--accent-active-gradient);
    
    opacity: 0;
    transition: right .3s ease-in, opacity .1s ease;
}

nav#global #name a:after {
    z-index: -2;
    background: var(--accent-base-gradient);
    
    transition: right .3s ease-in;
}

nav#global #name a:hover:before,
nav#global #name a:hover:after {
    right: -1.5rem;
    
    transition: right 1.3s ease-out, opacity .1s ease;
}

nav#global #name a > flower {
    z-index: -2;
    position: absolute;
    top: calc(50% - (var(--flower-size) / 2));
    right: calc(100% + (var(--flower-size) / 3));
    width: var(--flower-size);
    height: var(--flower-size);
    background: url("/assets/media/flower.svg") no-repeat;
    
    -webkit-mask: url("/assets/media/flower.svg") no-repeat;
            mask: url("/assets/media/flower.svg") no-repeat;
    
    transition: right .3s ease-in, transform .3s ease-in;
}

nav#global #name a > flower:before,
nav#global #name a > flower:after {
    content: "";
    position: absolute;
    top: var(--global-header-size);
    right: 0;
    width: var(--flower-size);
    height: var(--global-header-size);
}

nav#global #name a > flower:before {
    z-index: -1;
    background: var(--accent-active-gradient);
    opacity: 0;
    
    transition: transform .3s ease-in, opacity .1s ease;
}

nav#global #name a > flower:after {
    z-index: -2;
    background: var(--accent-base-gradient);
    
    transition: transform .3s ease-in;
}

nav#global #name a:hover > flower {
    right: calc(var(--flower-size) / 2 * -1 - .5rem);
    transform: rotate(135deg);
    
    transition: right 1.3s ease-out, transform 1.3s ease-out;
}

nav#global #name a:hover > flower:before,
nav#global #name a:hover > flower:after {
    transform: rotate(-135deg);
    transition: transform 1.3s ease-out, opacity .1s ease;
}

nav#global #name a:focus:before,
nav#global #name a:active:before,
nav#global #name a:focus > flower:before,
nav#global #name a:active > flower:before {
    opacity: 1;
}

section#footer {
    z-index: 99;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: var(--global-footer-size);
    background: var(--dark-base-gradient);
    box-shadow: inset 0 2px 0 var(--dark-dark-color);
    color: #ffffff;
    font-size: .8em;
    text-align: center;
}

section#footer:before {
    content: "";
    position: absolute;
    bottom: calc(100% - 1px);
    left: 1em;
    width: var(--global-footer-left-width);
    height: var(--global-footer-left-height);
    background: var(--global-footer-left-image) center / contain no-repeat;
}

section#footer:after {
    content: "";
    position: absolute;
    bottom: calc(100% - 1px);
    right: 1em;
    width: var(--global-footer-right-width);
    height: var(--global-footer-right-height);
    background: var(--global-footer-right-image) center / contain no-repeat;
}



/* -----------
    CAST PAGE
   ----------- */
section.character-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5em;
}

section.character-information {
    display: flex;
    flex-direction: row;
    gap: 1em;
}

section.character-card:nth-child(odd) > section.character-information {
    flex-direction: row-reverse;
}

div.character-photo {
    position: relative;
    height: 100%;
    transform: rotate(-2deg);
    flex-basis: 30%;
    transition: transform .3s ease;
}

div.character-photo:hover {
    transform: perspective(3000px) rotateX(-10deg) rotateY(5deg) rotate(-1deg) scale(1.05);
}

section.character-card:nth-child(odd) div.character-photo {
    transform: rotate(2deg);
}

section.character-card:nth-child(odd) div.character-photo:hover {
    transform: perspective(3000px) rotateX(-10deg) rotateY(-5deg) rotate(1deg) scale(1.05);
}

div.character-photo > a {
    --shadow-params: 0 0 .75em 0;
    
    position: relative;
    padding: 1em .6em 2.1em .6em;
    border-radius: .1em;
    box-shadow: 0 0 0 1px #8b8a8a, var(--shadow-params) rgba(var(--shadow-color), var(--shadow-opacity));
    background: var(--polaroid-base-gradient);
    display: block;
}

div.character-photo > a:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: .1em;
    background: var(--polaroid-hover-gradient);
    opacity: 0;
    transition: opacity .3s ease;
    mix-blend-mode: multiply;
}

div.character-photo > a:hover:before {
    opacity: .5;
}

div.character-photo > a:after {
    content: "Read More";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2.1em;
    line-height: 1.5em;
    text-align: center;
    font-family: var(--subheader-font);
    font-weight: bold;
    font-size: 1.2em;
    color: #000000;
    
    transition: color .2s ease;
}

div.character-photo:hover > a:after {
    color: var(--accent-primary-color);
}

div.character-photo img {
    position: relative;
    width: 100%;
    display: block;
}

div.character-photo img.hover {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    padding: 1em .6em 2.1em .6em;
    opacity: 0;
    transition: opacity .4s ease;
}

div.character-photo:hover img.hover {
    opacity: 1;
}

div.character-data {
    display: flex;
    flex-direction: column;
    gap: .5em;
    flex: 1;
}

section.character-stats {
    --shadow-opacity: .25;
    
    margin: 0 2em;
    padding: .5em;
    height: fit-content;
    background: linear-gradient(var(--light-primary-color), var(--light-light-color));
    border: 1px solid rgb(200, 200, 200);
    border-radius: var(--global-border-radius);
    box-shadow: var(--shadow-params) rgba(var(--shadow-color), var(--shadow-opacity)), inset 0 2px 0 0 #f6f6f6;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
}

section.character-stats stat {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
}

section.character-stats stat-title {
    color: var(--accent-primary-color);
    font-weight: bold;
}

section.character-bio-wrapper > .bio-text {
    text-align: justify;
}



/* -------------
    COMIC PAGES
   ------------- */
section#page-wrapper,
section#page {
    width: var(--comic-page-width);
    display: flex;
    flex-direction: column;
    align-items: center;
}

section#page-wrapper {
    max-width: 90%;
}

section#page-wrapper > section#page {
    --shadow-opacity: .25;
    
    border-radius: var(--global-border-radius);
    box-shadow: var(--shadow-params) rgba(var(--shadow-color), var(--shadow-opacity));
}

section#page-wrapper > section#page #page-name {
    width: 100%;
    background: var(--dark-base-gradient);
    color: #ffffff;
    font-weight: normal;
    border: 1px solid var(--dark-dark-color);
    border-top-width: 2px;
    border-radius: var(--global-border-radius) var(--global-border-radius) 0 0;
    text-align: center;
}

section#page-wrapper > section#page subheader {
    width: 100%;
    text-align: center;
}

section#page-wrapper > section#page subheader:before,
section#page-wrapper > section#page subheader:after {
    content: none;
}

section#page-wrapper > section#page a {
    --effect-h-offset: -3rem;
    --effect-v-offset: -2rem;
    --effect-width: 16rem;
    --effect-height: 8rem;
    
    position: relative;
    width: 100%;
    
    vertical-align: bottom;
}

section#page-wrapper > section#page a:before {
    content: "";
    position: absolute;
    width: var(--effect-width);
    height: var(--effect-height);
    pointer-events: none;
}

section#page-wrapper > section#page a:before {
    top: var(--effect-v-offset);
    left: var(--effect-h-offset);
    background: var(--top-right-carnation) center / contain no-repeat;
}

section#page-wrapper > section#page img {
    width: 100%;
    border: 5px solid var(--dark-dark-color);
    border-top-width: 0;
    border-radius: 0 0 var(--global-border-radius) var(--global-border-radius);
    overflow: hidden;
}

nav.control-wrapper {
    position: relative;
    padding: .3em 0;
    width: calc(100% - 2em);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .25em;
}

nav.control-wrapper .button {
    z-index: 0;
    position: relative;
    padding: .25em .5em;
    background: var(--dark-base-gradient);
    border-radius: var(--global-border-radius);
    color: #ffffff;
    font-family: var(--header-font);
    cursor: pointer;
    text-decoration: none;
    overflow: hidden;
    user-select: none;
}

nav.control-wrapper .button:not(dropdown):active {
    color: #d8d8d8;
    text-shadow: 0 -1px var(--accent-dark-color), 0 1px var(--accent-light-color);
}

nav.control-wrapper .button:not(dropdown):before,
nav.control-wrapper .button:not(dropdown):after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

nav.control-wrapper .button:not(dropdown):before {
    z-index: -2;
    background: var(--accent-base-gradient);
    transition: opacity .6s ease;
}

nav.control-wrapper .button:not(dropdown):after {
    z-index: -1;
    background: var(--accent-active-gradient);
    box-shadow: inset 0 -2px 0 var(--accent-tertiary-color);
    transition: opacity .1s ease;
}

nav.control-wrapper .button:not(dropdown):hover:before,
nav.control-wrapper .button:not(dropdown):focus:before,
nav.control-wrapper .button:not(dropdown):active:after {
    opacity: 1;
}

nav.control-wrapper .button[disabled] {
    background: var(--disabled-gradient);
    text-shadow: 0 -1px #474851, 0 1px #919297;
    box-shadow: inset 0 -2px 0 #62646d;
    cursor: initial;
}

nav.control-wrapper .button[disabled]:hover,
nav.control-wrapper .button[disabled]:active {
    color: #ffffff;
    text-shadow: inherit;
}

nav.control-wrapper .button[disabled]:hover:before,
nav.control-wrapper .button[disabled]:hover:after,
nav.control-wrapper .button[disabled]:active:before,
nav.control-wrapper .button[disabled]:active:after {
    opacity: 0;
}

nav.control-wrapper > section.page-controls {
    z-index: 99;
    width: var(--page-controls-width);
    display: grid;
    gap: .5rem;
    grid-template-columns: auto auto 1fr 1fr auto auto;
    filter: drop-shadow(0 0 1em rgba(0, 0, 0, .25));
}

nav.control-wrapper > section.page-controls a {
    width: 4rem;
    height: 3.6rem;
    text-align: center;
}

nav.control-wrapper > section.page-controls > dropdown {
    position: relative;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    width: 100%;
    height: 3.6rem;
    outline: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: initial;
}

nav.control-wrapper > section.page-controls > dropdown.select-chapter.button {
    z-index: 1;
}

nav.control-wrapper > section.page-controls > dropdown.select-page.button {
    z-index: 2;
}

nav.control-wrapper > section.page-controls > dropdown arrow {
    position: relative;
    top: 0;
    right: 0;
    padding: .25em 0;
    width: 2em;
    text-align: center;
    transition: transform .3s ease, color .1s ease;
}

nav.control-wrapper > section.page-controls > dropdown:focus arrow {
    color: #d8d8d8;
    text-shadow: -1px 0 var(--accent-dark-color), 1px 0 var(--accent-light-color);
    transform: rotate(90deg);
}

nav.control-wrapper > section.page-controls > dropdown arrow:before {
    z-index: -2;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: var(--accent-base-gradient);
    border-radius: 0 var(--global-border-radius) var(--global-border-radius) 0;
    opacity: 0;
    transition: transform .3s ease, opacity .6s ease;
}

nav.control-wrapper > section.page-controls > dropdown arrow:after {
    z-index: -1;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--accent-active-gradient);
    border-radius: 0 var(--global-border-radius) var(--global-border-radius) 0;
    opacity: 0;
    box-shadow: inset 0 -2px 0 var(--accent-tertiary-color);
    transition: transform .3s ease, opacity .1s ease;
}

nav.control-wrapper > section.page-controls > dropdown:hover arrow:before,
nav.control-wrapper > section.page-controls > dropdown:focus arrow:after {
    opacity: 1;
}

nav.control-wrapper > section.page-controls > dropdown:focus arrow:before,
nav.control-wrapper > section.page-controls > dropdown:focus arrow:after {
    transform: rotate(-90deg);
}

nav.control-wrapper > section.page-controls > dropdown list {    
    z-index: 100;
    position: absolute;
    left: 0;
    width: 100%;
    max-height: var(--dropdown-list-height);
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease, top .3s ease, bottom .3s ease;
}

nav.control-wrapper > section.page-controls > dropdown:focus list {
    pointer-events: initial;
    opacity: 1;
}

nav.control-wrapper > section.page-controls > dropdown list gradient {
    z-index: 2;
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.8em;
    border-radius: var(--global-border-radius);
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}

nav.control-wrapper > section.page-controls > dropdown list gradient.top {
    top: 0;
    background: linear-gradient(var(--dark-dark-color), rgba(0, 0, 0, 0));
}

nav.control-wrapper > section.page-controls > dropdown list gradient.bottom {
    bottom: 0;
    background: linear-gradient(rgba(0, 0, 0, 0), var(--dark-dark-color));
}

nav.control-wrapper > section.page-controls > dropdown items {
    z-index: 100;
    left: 0;
    width: 100%;
    max-height: var(--dropdown-list-height);
    
    background: var(--dark-base-gradient);
    border-radius: var(--global-border-radius);
    display: flex;
    flex-direction: column;
    
    overflow: hidden;
    overflow-y: overlay;
    scrollbar-width: none;
    -moz-scrollbar-width: none;
}

nav.control-wrapper > section.page-controls > dropdown item {
    z-index: 1;
    position: relative;
    bottom: 0;
    padding: .25em .5em;
}

nav.control-wrapper > section.page-controls > dropdown item[selected] {
    background: var(--accent-base-gradient);
    cursor: default;
}

nav.control-wrapper > section.page-controls > dropdown item:before {
    z-index: -1;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--accent-base-gradient);
    opacity: 0;
    transition: opacity .3s ease;
}

nav.control-wrapper > section.page-controls > dropdown item:hover:before {
    opacity: 1;
}

nav.control-wrapper > section#bookmark-controls {
    width: 60%;
    display: flex;
    justify-content: center;
    gap: .5rem;
}

section#description-wrapper {
    width: 100%;
}



/* -------------------
    PAGE GRID MODULES
   ------------------- */
section.module-grid-layout {
    width: 100%;
    display: grid;
    grid-template-columns: var(--module-width) auto;
    grid-template-areas: 
        "title title"
        "cover data";
    grid-row-gap: .5em;
    grid-column-gap: 1.5em;
}

.about-section:nth-child(odd) {
    grid-template-columns: auto var(--module-width);
    grid-template-areas: 
        "title title"
        "data cover";
}

section.module-grid-layout > subheader.module-title {
    text-align: center;
    grid-area: title;
    grid-column: 1 / 3;
}

.module-cover {
    grid-area: cover;
    filter: drop-shadow(0 0 .25em rgba(0, 0, 0, .5));
    transition: transform .2s ease, filter .2s ease;
    transition: width .2s ease;
}

a.module-cover:hover {
    filter: drop-shadow(0 0 .5em rgba(0, 0, 0, .75));
    transform: scale(1.02);
}

.module-cover > img {
    width: 100%;
    background: var(--accent-primary-color);
    border: 5px solid var(--dark-dark-color);
    justify-self: flex-end;
    display: inline-block;
}

.module-data {
    grid-area: data;
}

nav.chapter-pages {
    overflow-y: auto;
}

nav.chapter-pages > ul {
    margin: 0;
    padding: 0;
}

nav.chapter-pages > ul > li {
    display: flex;
    align-items: center;
}

nav.chapter-pages > ul > li > div.chapter-page { flex: 1; }
nav.chapter-pages > ul > li > div.chapter-date { font-size: .75em; }



/* ---------------
    MEDIA QUERIES
   --------------- */

@media screen and (max-width: 2160px) {
    html {
        --global-page-width:   55%;
        --comic-page-width:    85%;
        --page-controls-width: 70%;
    }
}

@media screen and (max-width: 1920px) {
    html {
        --global-page-width:   60%;
        --comic-page-width:    100%;
        --page-controls-width: 85%;
    }
}

@media screen and (max-width: 1440px) {
    html {
        --global-page-width:   75%;
        --page-controls-width: 100%;
        
        --global-footer-left-width:   calc(313px / 1.5);
        --global-footer-left-height:  calc(133px / 1.5);
        --global-footer-right-width:  calc(267px / 1.5);
        --global-footer-right-height: calc(136px / 1.5);
    }
    
    nav#global #name,
    section#footer:before,
    section#footer:after {
        display: none;
    }
}

@media screen and (max-width: 1200px) {
    section.module-grid-layout, .about-section:nth-child(odd) {
        grid-template-areas: 
            "title title"
            "cover cover"
            "data data";
    }
    
    .module-cover {
        margin: auto;
        width: var(--module-width);
    }
}

@media screen and (min-width: 1025px) {
    section.character-bio-wrapper > .bio-text > div.character-photo {
        display: none;
    }
}

@media screen and (max-width: 1024px) {
    html {
        --global-page-width: 85%;
    }
    
    button {
        font-size: 2rem;
    }
    
    nav#global #links-wrapper {
        padding: 0;
        width: 100%;
        text-align: center;
    }
    
    nav#global #links a {
        flex: 1;
    }
    
    nav.control-wrapper {
        width: 100%;
    }
    
    section.character-information > .character-photo {
        display: none;
    }
    
    div.character-photo,
    section.character-card:nth-child(odd) div.character-photo {
        position: unset;
        border: 5px solid var(--dark-dark-color);
        border-top-width: 0;
        border-left-width: 0;
        border-bottom-width: 0;
        transform: none;
        transition: none;
        grid-area: photo;
    }
    
    section.character-card:nth-child(odd) div.character-photo {
        border-left-width: 5px;
        border-right-width: 0;
    }
    
    div.character-photo:hover,
    section.character-card:nth-child(odd) div.character-photo:hover {
        transform: none;
    }
    
    div.character-photo > a:before, div.character-photo > a:after { display: none; }
    div.character-photo > a {
        padding: 0;
        height: 100%;
        border-radius: 0;
        background: transparent;
        color: #ffffff;
        text-align: center;
        text-decoration: none;
        box-shadow: unset;
        display: flex;
        flex-direction: column;
    }
    
    div.character-photo > a > p {
        z-index: 1;
        position: relative;
        background: var(--dark-base-gradient);
        border-top: 2px solid var(--dark-dark-color);
        font-size: .8em;
        font-family: var(--header-font);
        font-weight: normal;
        flex: 1;
    }
    
    div.character-photo > a > p > span {
        position: relative;
        display: block;
    }
    
    div.character-photo > a > p > span:before,
    div.character-photo > a > p > span:after {
        content: "";
        position: absolute;
        top: -2px;
        left: 0;
        width: 100%;
        height: calc(100% + 2px);
        opacity: 0;
    }
    
    div.character-photo > a > p > span:before {
        z-index: -2;
        background: var(--accent-base-gradient);
        border-top: 2px solid var(--accent-primary-color);
        transition: opacity .6s ease, border .6s ease;
    }
    
    div.character-photo > a > p > span:after {
        z-index: -1;
        background: var(--accent-active-gradient);
        border-top: 2px solid var(--accent-dark-color);
        transition: opacity .1s ease, border .1s ease;
    }
    
    div.character-photo > a:hover > p > span:before,
    div.character-photo > a:focus > p > span:before {
        opacity: 1;
    }
    
    div.character-photo > a:active > p > span {
        color: #d8d8d8;
        text-shadow: 0 -1px var(--accent-dark-color), 0 1px var(--accent-light-color);
    }
    
    div.character-photo > a:active > p > span:after {
        opacity: 1;
    }
    
    section.character-bio-wrapper > .bio-text {
        padding: 0;
        display: grid;
        grid-template-columns: 25% auto;
        grid-template-areas: "photo bio";
    }
    
    section.character-bio-wrapper > .bio-text > p {
        padding: .5em;
        grid-area: bio;
    }
    
    section.character-card:nth-child(odd) section.character-bio-wrapper > .bio-text {
        grid-template-columns: auto 25%;
        grid-template-areas: "bio photo";
    }
}

@media screen and (max-width: 768px) {
    html {
        --global-page-width: 90%;
    }
    
    nav#global {
        transition: .3s box-shadow 0 linear;
    }
    
    nav#global:after {
        z-index: -1;
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--dark-primary-color);
        opacity: 0;
        transition: .3s opacity .2s ease;
    }
    
    nav#global:has(#links[open]) {
        box-shadow: none;
        transition-delay: 0s;
    }
    
    nav#global:has(#links[open]):after {
        opacity: 1;
        transition: none;
    }
    
    nav#global > section {
        z-index: 1;
        overflow: visible;
    }
    
    nav#global #links-wrapper #dropdown {
        display: block;
    }
    
    nav#global #links {
        --dropdown-height: calc(100% - var(--global-header-size) - 2rem);
        height: 0;
        background: var(--dark-base-gradient);
        flex-direction: column;
        overflow: hidden;
        
        transition: height .3s ease;
    }
    
    nav#global #links[open] { height: var(--dropdown-height); }
    
    nav#global a {
        z-index: 1;
        padding: calc((var(--dropdown-height) / 6) / 2);
        line-height: 0;
        font-size: 4rem;
    }
    
    section#footer .extended-footer { display: none; }
    
    nav.control-wrapper > section.page-controls {
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "prev page next"
                             "first chap last";
    }
    
    nav.control-wrapper a.first-page  { grid-area: first; }
    nav.control-wrapper a.latest-page { grid-area: last;  }
    nav.control-wrapper a.prev-page   { grid-area: prev;  }
    nav.control-wrapper a.next-page   { grid-area: next;  }
    nav.control-wrapper dropdown.select-chapter { grid-area: chap; }
    nav.control-wrapper dropdown.select-page    { grid-area: page; }
    
    nav.control-wrapper:nth-of-type(even) section.page-controls { display: none; }
    section#page-wrapper > section#page a:before { display: none; }
    nav.control-wrapper > section#bookmark-controls { width: 100%; }
    nav.control-wrapper .button { flex: 1; }
    
    .module-cover {
        --module-width: 35%;
    }
}

@media screen and (max-width: 600px) {
    html {
        --global-page-width: 100%;
        --global-header-size: 6rem;
    }
    
    section#page-wrapper { max-width: 92%; }
    
    main#content-wrapper { border: 0; }

    #about-wrapper,
    #archive-wrapper,
    #cast-wrapper {
        padding-top: 0;
        width: 92%;
    }
    
    #about-wrapper .module-cover,
    #about-wrapper .module-title,
    #archive-wrapper .module-cover,
    #archive-wrapper .module-title,
    #cast-wrapper subheader { display: none; }
    
    
    section.module-grid-layout, .about-section:nth-child(odd) {
        --shadow-opacity: .25;
        border-radius: var(--global-border-radius);
        box-shadow: var(--shadow-params) rgba(var(--shadow-color), var(--shadow-opacity));
        grid-template-areas: "data data";
    }
    
    #about-wrapper .module-data .container-header,
    #archive-wrapper .module-data .container-header,
    #cast-wrapper section.character-bio-wrapper > .bio-header {
        padding: 0;
        font-family: var(--subheader-font);
        font-size: var(--subheader-size);
        font-weight: bold;
        text-align: center;
    }
    
    div.character-data {
        box-shadow: var(--shadow-params) rgba(var(--shadow-color), var(--shadow-opacity));
        border-radius: var(--global-border-radius);
        gap: 0;
    }
    
    section.character-stats {
        margin: 0;
        border-bottom-width: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        box-shadow: inset 0 2px 0 0 #f6f6f6;
    }
    
    section.character-bio-wrapper > .bio-header {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
}

@media screen and (min-width: 513px) {
    section.character-bio-wrapper > .bio-header > a {
        display: none;
    }
}

@media screen and (max-width: 512px) {
    section.character-bio-wrapper > .bio-header {
        position: relative;
    }
    
    section.character-bio-wrapper > .bio-header > a {
        z-index: 1;
        position: relative;
        margin-top: .25rem;
        margin-left: 4px;
        margin-bottom: -1px;
        padding: .5rem;
        width: calc(100% - 8px);
        height: calc(100% + 1px);
        background: transparent;
        font-family: var(--header-font);
        font-size: 1em;
        text-decoration: none;
        line-height: .8em;
        display: block;
    }
    
    section.character-bio-wrapper > .bio-header > a:hover,
    section.character-bio-wrapper > .bio-header > a:focus {
        color: #ffffff;
    }
    
    section.character-bio-wrapper > .bio-header > a:active {
        color: #d8d8d8;
        text-shadow: 0 -1px var(--accent-dark-color), 0 1px var(--accent-light-color);
    }
    
    section.character-bio-wrapper > .bio-header > a:before,
    section.character-bio-wrapper > .bio-header > a:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
    }
    
    section.character-bio-wrapper > .bio-header > a:before {
        z-index: -2;
        background: var(--accent-base-gradient);
        transition: opacity .6s ease;
    }
    
    section.character-bio-wrapper > .bio-header > a:after {
        z-index: -1;
        background: var(--accent-active-gradient);
        transition: opacity .1s ease;
    }
    
    section.character-bio-wrapper > .bio-header > a:hover:before,
    section.character-bio-wrapper > .bio-header > a:focus:before {
        opacity: 1;
    }
    
    section.character-bio-wrapper > .bio-header > a:active:after {
        box-shadow: inset 0 -2px 0 var(--accent-tertiary-color);
        opacity: 1;
    }
    
    section.character-bio-wrapper > .bio-text,
    section.character-card:nth-child(odd) section.character-bio-wrapper > .bio-text {
        grid-template-areas: "bio bio";
    }
    
    div.character-photo { display: none; }
}

@media screen and (min-width: 426px) {
    section.character-bio-wrapper > .bio-header > span {
        display: none;
    }
    
    section.character-bio-wrapper > .bio-text > .character-stats {
        display: none;
    }
}

@media screen and (max-width: 425px) {
    html {
        --global-border-radius: 0;
    }
    
    main#content-wrapper {
        padding: var(--global-header-size) 0 var(--global-footer-size) 0;
        background: var(--dark-dark-color);
        flex: 1;
    }
    section#page-wrapper { max-width: 100%; flex: 1; }
    section#page-wrapper > section#page #page-name {
        border: 0 solid var(--dark-dark-color);
        border-top-width: 2px;
    }
    section#page-wrapper > section#page img { border-left-width: 0; border-right-width: 0; }
    
    nav.control-wrapper { padding: 0; }
    nav.control-wrapper > section#bookmark-controls { gap: 0; }
    nav.control-wrapper > section.page-controls {
        gap: 0;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-areas: "chap chap page page"
                             "first prev next last";
    }
    
    nav.control-wrapper > section.page-controls a {
        width: auto;
        font-size: 2.5rem;
        line-height: 2rem;
    }
    
    nav.control-wrapper > section.page-controls > dropdown {
        position: initial;
    }
    
    nav.control-wrapper > section.page-controls > dropdown list {
        --dropdown-list-height: 65vh;
        
        top: 50%!important;
        font-size: 3rem;
    }
    
    section#description-wrapper { display: flex; flex-direction: column; flex: 1; }
    section.data-container > #page-timestamp   { border: 0;}
    section.data-container > #page-description { border: 0; flex: 1; }
    section.data-container p { display: flex; flex-direction: column; }
    section.data-container p .timestamp-separator { display: none; }
    
    section.wrapper#about-wrapper,
    section.wrapper#archive-wrapper,
    section.wrapper#cast-wrapper {
        width: 100%;
        flex: 1;
        gap: 0;
    }
    
    section > header { border: 0; }
    section > header + * {
        margin-top: calc(var(--header-size) + 1.5rem);
    }
    
    section.module-grid-layout {
        box-shadow: unset!important;
    }
    
    #about-wrapper .module-grid-layout,
    #archive-wrapper .module-grid-layout {
        flex: 1;
    }
    
    #about-wrapper .module-data,
    #archive-wrapper .module-data {
        display: flex;
        flex-direction: column;
    }
    
    #cast-wrapper .container-content { border-left-width: 0; border-right-width: 0; }
    #archive-wrapper .module-data .container-content { padding: 0; }
    #about-wrapper .module-data .container-content,
    #archive-wrapper .module-data .container-content {
        border: 0;
        flex: 1;
    }
    
    nav.chapter-pages > ul > li { display: block; }
    nav.chapter-pages > ul > li:nth-child(even) { background: var(--light-primary-color); }
    nav.chapter-pages > ul > li > div.chapter-page a {
        padding: .5rem;
        width: 100%;
        display: block;
    }
    
    nav.chapter-pages > ul > li > div.chapter-date {
        padding: 0 1.25rem;
        font-size: .85em;
    }
    
    div.character-data { box-shadow: unset; }
    
    section.character-bio-wrapper > .bio-header > p { display: none; }
    section.character-bio-wrapper > .bio-header > a {
        margin-top: .25rem;
        margin-left: -1px;
        margin-bottom: -1px;
        width: calc(100% + 2px);
    }
    
    section.character-bio-wrapper > .bio-text { display: flex; flex-direction: column; }
    .character-data > section.character-stats { display: none; }
    section.character-stats {
        background: transparent;
        border: 0;
        box-shadow: unset;
        display: unset;
    }
    
    section.character-stats stat {
        width: 100%;
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width: 375px) {
    section#footer .site-attribute { display: none; }
}