main {
    z-index: 8;
    position: relative;
}

slot {
    z-index: 8;
    position: relative;
    min-height: 50vh;
}

.main-body {
    z-index: 8;
    position: relative;
    min-height: 60vh;
}

.wrapper {
    position: relative;
    min-height: 100vh;
}

.hero-section {
    mask-image: linear-gradient(#000, 98%, transparent);
    z-index: 8;
}

.footer-section {
    z-index: 9;
    position: relative;
}

.card {
    padding: 3%;
}

.post-card {
    margin: 2%;
}

.text-body-secondary {
    --bs-text-opacity: 1;
    color: rgba(237, 242, 247, 0.75) !important;
}

/* Age Gate overlay - positioned above all Bootstrap overlays (tooltips, modals, etc.) */
.age-gate-overlay {
    z-index: 1090;
}

.bg-notebook-dark {
    background-image: url("../assets/images/textures/notebook-dark.png");
    background-repeat: repeat;
}

.common_bg_img {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.common_bg_img.lattice {
    background-image: url('../assets/images/bg_lattice_pattern.webp');
    background-repeat: repeat;
    background-size: 3%;
    mix-blend-mode: overlay;
    z-index: -99;
    opacity: 20%;
}

.common_bg_img.base {
    background-image: url('../assets/images/textures/lined-paper-2.png');
    background-repeat: repeat;
    z-index: -100
}

.cover_noise {
    position: fixed;
    z-index: 9998;
    pointer-events: none;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    top: 0;
    left: 0;
}

.cover_noise:before {
    content: "";
    position: absolute;
    top: -10vh;
    left: -10vw;
    width: 120vw;
    height: 120vh;
    animation: noise-animation .3s steps(5) infinite;
    background-size: min(1.5rem, 150px);
    background-image: url("../assets/images/bg_noise.webp");
    background-repeat: repeat;
}

@keyframes noise-animation {
    0% {
        transform: translateZ(0)
    }

    10% {
        transform: translate3d(-5vw,-5vh,0)
    }

    20% {
        transform: translate3d(-10vw,5vh,0)
    }

    30% {
        transform: translate3d(5vw,-10vh,0)
    }

    40% {
        transform: translate3d(-5vw,10vh,0)
    }

    50% {
        transform: translate3d(-10vw,5vh,0)
    }

    60% {
        transform: translate3d(5vw,5vh,0)
    }

    70% {
        transform: translate3d(0,10vh,0)
    }

    80% {
        transform: translate3d(-5vw,-5vh,0)
    }

    90% {
        transform: translate3d(10vw,5vh,0)
    }

    to {
        transform: translate3d(5vw,5vh,0)
    }
}

.dusts {
    position: fixed;
    z-index: -98;
    pointer-events: none;
    width: 100%;
    height: 100%
}

@media screen and (max-width: 767.9px) {
    .dusts {
        display:none
    }
}

.dust {
    width: min(.3rem,30px);
    height: min(.3rem,30px);
    will-change: transform,opacity
}

.omp-player { font-size: 16px; } /* locks the widget’s sizing context */

.omp-player .omp-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;   /* lock button font size */
    line-height: 1;
}

.omp-player .omp-btn i{
    font-size: 1em;    /* icon = button size */
    line-height: 1;
}

.fixed-size-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Special Elite", system-ui;
    text-transform: uppercase;
}

p {
    font-family: "Special Elite", system-ui;
}

a {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-light-rgb), var(--bs-text-opacity)) !important;
}

/* OMP Music Player (GLOBAL so it survives Astro head swaps) */
.omp-player{
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 9999;

    width: min(420px, calc(100vw - 2rem));
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(10,10,10,0.85);
    color: rgba(255,255,255,0.92);
    border-radius: 12px;
    padding: 0.75rem 0.85rem;
    backdrop-filter: blur(10px);

    /* lock sizing so page typography changes don’t affect it */
    font-size: 16px;
    line-height: 1.2;
}

.omp-player__row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:0.75rem;
}

.omp-player__row--small{
    margin-top:0.35rem;
    font-size:0.85rem;
    opacity:0.85;
}

.omp-player__controls{
    display:flex;
    align-items:center;
    gap:0.4rem;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.omp-btn{
    border:1px solid rgba(255,255,255,0.15);
    background:rgba(255,255,255,0.06);
    color:inherit;
    border-radius:10px;
    padding:0.35rem 0.5rem;
    cursor:pointer;
    line-height:1;
    font-size:16px; /* lock button sizing */
}

.omp-btn:hover{
    background:rgba(255,255,255,0.10);
}

.omp-player__vol input[type="range"]{
    width:90px;
}

.omp-player__hint{
    opacity:0.7;
    text-align:right;
    margin-left:auto;
}

/* Keep FA icons from being reshaped by global styles */
.omp-player i.fa-solid,
.omp-player i.fa-regular,
.omp-player i.fa-brands{
    font-size: 1em;
    line-height: 1;
    vertical-align: -0.125em;
}

@media (prefers-reduced-motion: reduce){
    .omp-player{ backdrop-filter:none; }
}

/* Glitch text base */
[data-glitch]{
    position: relative;
    display: inline-block;
    will-change: transform, filter;
}

/* jittery movement + slight blur */
[data-glitch].is-glitching{
    animation: glitch-jitter 120ms steps(2, end) infinite;
    filter: blur(0.15px);
}

/* chromatic “ghosts” */
[data-glitch]::before,
[data-glitch]::after{
    content: attr(data-glitch-text);
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: screen; /* looks good over dark backgrounds */
}

[data-glitch].is-glitching::before{
    opacity: 0.65;
    transform: translate(-1px, 0);
    text-shadow: -1px 0 rgba(255, 70, 70, 0.65);
    clip-path: inset(0 0 55% 0);
}

[data-glitch].is-glitching::after{
    opacity: 0.55;
    transform: translate(1px, 0);
    text-shadow: 1px 0 rgba(70, 170, 255, 0.55);
    clip-path: inset(45% 0 0 0);
}

@keyframes glitch-jitter{
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-0.5px, 0.25px); }
    50%  { transform: translate(0.5px, -0.25px); }
    75%  { transform: translate(-0.25px, -0.5px); }
    100% { transform: translate(0.25px, 0.5px); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
    [data-glitch], [data-glitch]::before, [data-glitch]::after{
        animation: none !important;
        transition: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* Stop animations/transitions broadly */
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-glitch],
    [data-glitch]::before,
    [data-glitch]::after {
        animation: none !important;
        filter: none !important;
        transform: none !important;
    }

    [data-developing-photo] img {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }
}

.dossier{
    position: relative;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(10,10,10,0.65);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.8) inset;
    padding: 1.5rem;
    border-radius: 12px;
    overflow: hidden;
}

.dossier__header{
    display:flex;
    gap: 1.25rem;
    align-items:flex-start;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.dossier__stamp{
    font-family: "Special Elite", system-ui;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 2px solid rgba(255, 0, 0, 0.55);
    color: rgba(255, 80, 80, 0.85);
    padding: 0.5rem 0.75rem;
    transform: rotate(-6deg);
    user-select: none;
    white-space: nowrap;
}

.dossier__meta{ flex: 1; max-width: 520px; }
.dossier__metaRow{
    font-family: "Special Elite", system-ui;
    display:flex;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px dashed rgba(255,255,255,0.15);
    padding: 0.25rem 0;
}
.lbl{
    font-family: "Special Elite", system-ui;
    opacity: 0.7;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
}
.val{
    font-family: "Special Elite", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    letter-spacing: 0.06em;
}

.dossier__body{
    display:grid;
    grid-template-columns: 220px 1fr;
    gap: 1.5rem;
}

.dossier__photo{
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    background: rgba(0,0,0,0.35);
    overflow:hidden;
    min-height: 260px;
    height: 1rem;
}
.dossier__photo img{ width:100%; height:auto; display:block; filter: contrast(1.05) saturate(0.9); }

.photoRedacted{
    height: 100%;
    min-height: 260px;
    background:
            repeating-linear-gradient(
                    -20deg,
                    rgba(0,0,0,0.85) 0px,
                    rgba(0,0,0,0.85) 14px,
                    rgba(15,15,15,0.9) 14px,
                    rgba(15,15,15,0.9) 28px
            );
}

.field{
    border-bottom: 1px dashed rgba(255,255,255,0.15);
    padding: 0.5rem 0;
}
.field__label{
    font-family: "Special Elite", system-ui;
    opacity: 0.7;
    letter-spacing: 0.1em;
    font-size: 0.8rem;
    margin-bottom: 0.15rem;
}
.field__value{
    font-family: "Special Elite", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    letter-spacing: 0.06em;
    font-size: 1rem;
    line-height: 1.35;
    white-space: pre-wrap;
    word-break: break-word;
}
.field--block .field__value{ padding-top: 0.25rem; }

@media (max-width: 768px){
    .dossier__body{ grid-template-columns: 1fr; }
}

.character-detail img {
    max-height: 300px;
    object-fit: cover;
}

.character-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.12);
}

.card-stamp {
    font-family: "Special Elite", system-ui;
    position: absolute;
    top: 10px;
    right: 10px;
    padding: .35rem .5rem;
    border: 2px solid rgba(255, 60, 60, 0.6);
    color: rgba(255, 90, 90, 0.9);
    background: rgba(0,0,0,0.35);
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    transform: rotate(-8deg);
    user-select: none;
    z-index: 2;
}

.stamp {
    padding: .35rem .5rem;
    border: 2px solid rgba(255, 60, 60, 0.6);
    color: rgba(255, 90, 90, 0.9);
    background: rgba(0,0,0,0.35);
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    transform: rotate(-6deg);
    user-select: none;
    white-space: nowrap;
}

.img-redacted {
    height: 220px;
    background:
            repeating-linear-gradient(
                    -20deg,
                    rgba(0,0,0,0.85) 0px,
                    rgba(0,0,0,0.85) 14px,
                    rgba(15,15,15,0.9) 14px,
                    rgba(15,15,15,0.9) 28px
            );
}

.redacted-block {
    font-family: "Special Elite", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    letter-spacing: .08em;
    opacity: 0.65;
    white-space: pre-wrap;
    line-height: 1.2;
}

.photoRedactedWrap{ position: relative; }
.photoRedactedOverlay{
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background:
            repeating-linear-gradient(
                    -20deg,
                    rgba(0,0,0,0.85) 0px,
                    rgba(0,0,0,0.85) 14px,
                    rgba(15,15,15,0.9) 14px,
                    rgba(15,15,15,0.9) 28px
            );
    opacity: 0.85;
    pointer-events: none;
}

/* System preference: reduce non-essential motion */
@media (prefers-reduced-motion: reduce) {
    html:focus-within { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* Manual override (and also used as a shared “site reduced” flag) */
html.reduce-motion:focus-within { scroll-behavior: auto; }
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after {
    animation: none !important;
    transition: none !important;
}
html.reduce-motion .dusts,
html.reduce-motion .cover_noise {
    /* optional: hide the “moving ambience” layers entirely */
    display: none !important;
}