/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   


@font-face {
  font-family: 'BabelStoneCoelbren';
  src: url('fonts/BabelStoneCoelbren.woff2') format('woff2'),
       url('fonts/BabelStoneCoelbren.ttf') format('truetype');
}

.nav {
  font-family: 'BabelStoneCoelbren';
  letter-spacing: 50px;
  text-align: center;
  /*margin-right: -50px; /* cancels the final gap */
}


body {
  color: #cccccc;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 300;
  letter-spacing: 0.02em;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8); /* Helps text pop off the dark background */
  /* background-image: url('imgs/AQMHyn0Ib.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #0a0a0a; 
  min-height: 100vh; */
  background-color: #050505;
  background-image: url("https://www.transparenttextures.com/patterns/black-paper.png");
  background-attachment: fixed;
  margin: 0;
  
  
}

p {
    color: #cccccc;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.1); /* Very subtle "ink on paper" feel */
}


/* Use the "Old World" font for headings or emphasis */


h4 {
    color: #ff0000;
    font-family: 'IM Fell English SC', serif;
    font-weight: 100;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 4px; /* Spreads the letters out for a 'high-end' look */
    font-size: 2.3rem;
    margin: 40px 0 20px 0;
    border-bottom: 1px solid rgba(255, 0, 0, 0.3); /* Subtle 'underline' that doesn't touch the text */
    display: inline-block; /* Keeps the underline only as wide as the word */
}

h2 {
    color: #ff0000;
    font-family: 'IM Fell English SC', serif;
    font-size: clamp(1rem, 4vw, 1.5rem);
    letter-spacing: 12px;
    margin-left: 15px;
    text-transform: uppercase;
    /*margin: 50px -18px 5px 0;*/
    /*text-shadow: 2px 2px 4px #000;*/
    text-align: center;
    display: inline-block;
    justify-content: center;
    margin-top: 5px;
    margin-bottom: 5px;
    white-space: nowrap;
}



h2 .coelbren {
    font-family: 'BabelStoneCoelbren';
    text-align: center;
    letter-spacing: 15px;
    font-size: 0.7rem;
    color: #ffffff;
    display: block;
    margin-top: -43px;
    margin-left: 38px;
    opacity: 0.25;
}

h2 .hdr {
    display: block;          /* ensures margin behaves predictably */
    margin-top: -45px;       /* adjust this value to taste */

}



h3 {
    color: #ffffff;
    font-family: 'IM Fell English SC', serif;
    font-size: clamp(0.5rem, 2vw, 0.75rem);
    letter-spacing: 12px;
    margin-left: 15px;
    text-transform: uppercase;
    /*margin: 50px -18px 5px 0;*/
    /*text-shadow: 2px 2px 4px #000;*/
    text-align: center;
    display: inline-block;
    justify-content: center;
    margin-top: 5px;
    margin-bottom: 5px;
    white-space: nowrap;
    opacity: 0.75;
}

/*h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    font-family: 'EB Garamond', serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #ffffff;
}*/





/* Fix those blue links */
a {
    color: #ff0000;
    font-weight: 400;
    text-decoration: none;
    /*border-bottom: 1px solid #7d2e2e;*/
    transition: all 0.3s ease-in-out color 0.1s;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    /*padding: 2px 4px;*/
    display: inline-block;
    /* Apply the animation by default */
    animation: ambientFlicker 10s infinite;
}


/* Each link gets a unique "heartbeat" */
/* Every link in your list will now grab one of these four "flicker profiles" */

/* Profile 1: Fast & Nervous */
a:nth-child(4n+1) { 
    animation-duration: 3.7s; 
    animation-delay: -1.2s; 
}

/* Profile 2: Slow & Heavy */
a:nth-child(4n+2) { 
    animation-duration: 6.2s; 
    animation-delay: -4.5s; 
}

/* Profile 3: The "Glitchy" one */
a:nth-child(4n+3) { 
    animation-duration: 4.8s; 
    animation-delay: -2.8s; 
}

/* Profile 4: The Stable one (long delay) */
a:nth-child(4n+4) { 
    animation-duration: 7.5s; 
    animation-delay: -0.5s; 
}


a:hover {
    color: #ffd6d6; /* The bright "filament" */
    
    /* Layering the light: tight white core to deep red decay */
    text-shadow: 
        0 0 5px #fff,           /* The hottest part of the light */
        0 0 10px #ff3333,       /* The inner glow */
        0 0 20px #a30000,       /* The atmospheric red bleed */
        0 0 40px rgba(163,0,0,0.6); /* The distant shadow cast */
        
    /* Optional: A very subtle "bloom" around the box */
    background-color: rgba(163, 0, 0, 0.05);
    transition: all 0.2s ease-out; /* Sharper transition feels like a flickering light */
    animation: none;
}


@keyframes flicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
        /* Full brightness */
        text-shadow: 
            0 0 4px #fff,
            0 0 11px #ff3333,
            0 0 19px #ff3333,
            0 0 40px #a30000;
    }
    20%, 24%, 55% {        
        /* Dimmed / "Flicker" state */
        text-shadow: none;
        color: #7d2e2e; /* The "unlit" wire color */
    }
}

@keyframes ambientFlicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        color: #ff0000;
        text-shadow: 0 0 5px rgba(255, 0, 0, 0.4);
    }
    20%, 24%, 55% {
        color: #440000; /* Dims to a very dark, dried-blood red */
        text-shadow: none;
    }
}



/* Apply it only when you hover over the link */
a:hover {
    animation: flicker 2s infinite;
    color: #ffd6d6;
}



ul {
    list-style-type: square; /* Fits the sharp aesthetic better than circles */
}

ul, li, a {
    font-size: 13px;
}





h1 {
    margin: 0;
    text-align: center;
    padding: 0;
    line-height: 0;
}



.logo-window {
    width: 100%;
    max-width: 450px; /* Limits the logo size on desktop */
    height: 85px;    /* ADJUST THIS: The height of the visible text */
    margin: 0 auto;
    overflow: hidden; /* This "clips" anything outside the 180px height */
    display: flex;
    margin-bottom: 20px;
    align-items: center; /* Centers the text vertically in the window */
    justify-content: center;
}



.gif-light {
    /*width: 20%;*/
    max-width: 125px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: brightness(0.9) sepia(0) hue-rotate(330deg) saturate(0);
    opacity: 0.5; /* Makes it look a bit ghostlier against the background */
    transition: opacity 0.3s ease;
}

.gif-dark {
    /*width: 20%;*/
    max-width: 125px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: brightness(1.1) sepia(0) hue-rotate(330deg) saturate(0) drop-shadow(0 0 7px #ffffff);
    opacity: 0.7; /* Makes it look a bit ghostlier against the background */
    transition: opacity 0.3s ease;
}

.separator-gif {
    max-width: 125px; /* Making it slightly smaller than the logo helps hierarchy */
    height: auto;
    display: block;
    margin: 20px auto;
    
    /* This makes the GIF look more 'BecauseBrute' and less 'Internet Archive' */
    filter: brightness(0.8) sepia(1) hue-rotate(330deg) saturate(2);
    opacity: 0.7; /* Makes it look a bit ghostlier against the background */
    transition: opacity 0.3s ease;
}

.logo-img {
    width: 100%;
    height: auto;
    display: block;
    
    /* Optimized for your specific 'BecauseBrute' off-white image */
    /*filter: invert(28%) sepia(85%) saturate(2421%) hue-rotate(358deg) brightness(95%) contrast(105%);*/
    /*filter: invert(55%) sepia(33%) saturate(770%) hue-rotate(357deg) brightness(.77) contrast(27);
    
    transition: filter 0.3s ease;*/
    /* If the image has baked-in empty space, we can "nudge" it: */
    margin-left: 13px; 
}



/*.logo-img:hover {
     Shifts to the 'Ember Glow' bright coral/white to match your link hover */
/*    filter: invert(90%) sepia(10%) saturate(1000%) hue-rotate(320deg) brightness(1.1) drop-shadow(0 0 15px #ff0000);
}*/


.main-container {
    display: flex;
    flex-direction: column; /* Stacks everything vertically */
    align-items: center;    /* Forces every child to the exact horizontal center */
    width: 95%;
    max-width: 450px;
    margin: 0 auto;
    background: transparent;
    margin: 60px auto 20px auto;
}


.section {
    display: flex;
    flex-direction: column; /* Stacks everything vertically */
    align-items: center;    /* Forces every child to the exact horizontal center */
    background: transparent;
    margin: 100px auto 100px auto;
    border: 1px solid white;
}


/* PHONE: This automatically adjusts when the screen is small */
@media (max-width: 600px) {
    .main-container {
        width: 100%;       /* Fills the phone screen completely */
        border-radius: 0;  /* Optional: removes the arch for more room on mobile */
        border-left: none; /* Optional: removes side borders for a cleaner mobile look */
        border-right: none;
        padding: 40px 20px;
    }
}


.gallery-grid {
    display: flex;       /* Switches back to horizontal for just this box */
    flex-wrap: wrap;     /* Allows them to drop to a new row if needed */
    justify-content: center; 
    /*gap: 15px;           /* Sets the specific 'blood-red' gutter between squares */
    margin: 20px 0px 20px 0px;      /* Space above and below the grid */
}

.detail_container {
    margin: 0px 0px 20px 0px;     
}


.art-thumb {
    width: 70px;
    height: 70px;
    
    /* This is the magic line: it crops the image instead of stretching it */
    object-fit: cover; 
    
    /* This centers the crop (you can change 'center' to 'top' if needed) */
    object-position: center; 
    
    border: 1px solid #ff0000;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.art-thumb:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px #ff0000;
}

summary {
  list-style: none;
  cursor: pointer;
  /*padding: 0px 16px;*/
  text-align: center;
  font-size: 22px;
  user-select: none;
}

summary::-webkit-details-marker {
  display: none;
}


/* Lightbox */
#lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  overflow: hidden;
}

#lightbox-img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  position: relative;
  z-index: 2;
}

/* Left/right click zones */
.lightbox-nav {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 2;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  color: rgba(255,255,255,0.7);
  font-size: 48px;
  user-select: none;
}

.lightbox-nav:hover {
  color: white;
  background: rgba(255,255,255,0.05);
}

.lightbox-nav.prev {
  left: 0;
}

.lightbox-nav.next {
  right: 0;
}

/* Close button */
#lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 3;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 10px 14px;
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  border-radius: 4px;
}

#lightbox-close:hover {
  background: rgba(255, 255, 255, 0.25);
}