/* ============================================================================
   0.  Font
============================================================================ */
@font-face{
  font-family:'EB Garamond';
  src:url('./Assets/fonts/EBGaramond-VariableFont_wght.woff2') format('woff2-variations');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* ============================================================================
   1.  Lazy Loading Animations with Advanced Blur Effect
============================================================================ */
/* The low-quality placeholder image */
.image-wrapper img.lazyload {
  filter: blur(20px);
  transform: scale(1.1);
  transition: filter 400ms ease, transform 400ms ease;
  opacity: 1;
}

/* The high-quality image once it has loaded */
.image-wrapper img.lazyloaded {
  filter: blur(0);
  transform: scale(1);
}

/* ============================================================================
   2.  Root scale + hard reset
============================================================================ */
:root{
  --step-0:1rem;      /* body */
  --step-1:1.25rem;   /* small heading */
  --step-2:1.56rem;   /* h3 */
  --step-3:1.95rem;   /* h2 */
  --step-4:2.44rem;   /* h1 */
  --gap:3rem;
}

*,*::before,*::after{box-sizing:border-box;margin:0}

/* ============================================================================
   3.  Base html / body
============================================================================ */
html{height:100%;scroll-behavior:smooth;overflow-x:hidden;}
body{
  min-height:100vh;
  font-family:'EB Garamond',serif;
  font-size:clamp(1rem,0.9rem + 0.6vw,1.125rem); /* 16–18 px */
  line-height:1.55;
  letter-spacing:0.02em;
  background:#fff;
  color:#000;
  overflow-x:hidden;
  word-wrap:break-word;
}

/* ============================================================================
   4.  Paragraphs & lists
============================================================================ */
p{line-height:1.6;margin-bottom:1em;text-indent:0;}
li::marker{color:grey}

/* ============================================================================
   5.  Headings
============================================================================ */
h1,h2,h3,h4,h5{
  font-weight:bold;
  line-height:1.2;
  scroll-margin-top:6rem; /* clears sticky nav */
}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h4,h5{font-size:var(--step-1)}

/* Restore sticky to general h1, h3 */
h1,
h3{position:sticky; top:0; background:#fff;z-index:1000;text-align:center}

h3 {
  color: #414141;
  z-index: 10;
  padding: 10px 0 10px;
  margin: 0;
  text-align: center;
  font-size: 15px;
  line-height: 20.4px;
  font-family: 'Helvetica', sans-serif;
  letter-spacing: 0.053em;
}

/* ============================================================================
   6.  Links
============================================================================ */
a:any-link{color:#000000;text-decoration:underline}
a:hover{color:#000000}


/* ============================================================================
   7.  Images
============================================================================ */
img{display:block;max-width:100%;height:auto}
.image-wrapper{position:relative;overflow:hidden;aspect-ratio:6 / 9;}
.image-wrapper img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .1s ease-out;
}
.image-wrapper:hover{
  transform:translateY(-8px);
}
/* Fade unreferenced stories */
.image-wrapper[data-referenced="false"] {
  background: rgba(255,255,255,0.9);
  filter: grayscale(100%) brightness(0.5) contrast(0.6);
  will-change: filter;
}

/* white tile used as "filler" or when an image is missing */
.image-wrapper.placeholder{
  background:#ffffff;          /* solid black so it pops */
  min-height:300px;         /* same height as images  */
  pointer-events:none;
  box-shadow:none !important;
  transform:none !important;
}

/* ============================================================================
   Thumbnail title text (threads + stories) – show it ALL
   ========================================================================== */
   .overlay-text{
    padding: .1em .1em;                 /* a bit more breathing room */
  }
  
  .overlay-text .header-text,
  .overlay-image-text{
    font-family: 'Helvetica', sans-serif;
    font-weight: 700;
    letter-spacing: .053em;
    text-transform: uppercase;
    text-align: center;
  
    /* responsive size – smallest 0.65 rem, largest 0.95 rem                  */
    font-size: clamp(.65rem, .95vw + .25rem, .95rem);
    line-height: 1.25;
  
    /* -------------- NO ELLIPSIS, NO CUT-OFF ------------------------------- */
    display: block;          /* back to normal flow */
    white-space: normal;     /* let it wrap freely  */
    overflow: visible;       /* nothing gets hidden */
    text-overflow: initial;  /* no …                */
  
    hyphens: auto;           /* helps break very-long words on small screens */
    hyphenate-limit-chars: 4 4 12;
    overflow-wrap: break-word; 
  }

/* ============================================================================
   8.  Footer only (no navigation needed)
============================================================================ */

.site-footer{
  height: 40.4px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 4vw;
  background: #fff;
  font-family: system-ui, sans-serif;
  font-size: .9rem;
  color: #000;
  text-align: center;
  width:100%;
}

.site-footer a{
  font-weight: bold;
  text-decoration: none;
  border: none;
  color: inherit;
}

.site-footer a:hover{
  text-decoration: none;   /* keep it off on hover as well */
}

.section-title{
  position: sticky;        /* stick to viewport */
  top: 0;                  /* offset */
  background: #fff;        /* cover grid/overlay behind it */
  z-index: 1050;           /* Restored: Original z-index */
  margin: 0;               /* prevent jump */
  text-align: center;
}
/* ============================================================================
   9.  Utility classes
============================================================================ */
.hidden-content{display:none}
.colored.c-red{color:#000}
#homeButton{cursor:pointer}

/* ============================================================================
   10.  Pre / poetry blocks
============================================================================ */
pre,
pre.poem{
  font-family:inherit;
  white-space:pre-wrap;
  margin:0 0 0rem;
  text-indent:0;
  padding-left:0;
  padding-bottom: 40px;
}
.pre prose,
.commentary pre{padding-left:0;text-indent:0}
pre.prose-content{
  font-size:18px;line-height:1.5;text-indent:0;
  padding:20px 40px;letter-spacing:.06em;
  max-width:100%;
  padding-bottom: 40px;
}

/* ============================================================================
   11.  Content & prose containers
============================================================================ */
.prose,
.commentary,
.backlinks,
.quotes{
  font-size:1rem;
  line-height:1.6;
  max-width:70ch;
  padding:20px 40px;
  margin-inline:auto;
  overflow: hidden;
}
.prose{text-align:justify;text-indent:1em}
.commentary{text-indent:0}
.backlinks{color:#777;list-style:none;line-height:1.9}
.quotes{font-style:italic;color:#444}

/* ============================================================================
   12.  Home page thread grid (kept intact)
============================================================================ */
.home-container{
  display:flex;justify-content:space-between;position:relative;
  transition:transform 1.2s;
  /* z-index: 1; */ /* Removed: Reverting sticky layering change */
}
.home-container.pushed{transform:translateY(100vh)}
.list-container{width:50%;display:flex;flex-direction:column}
.new-list,.story-list{
  width:100%;display:grid;gap:0;z-index:99999;
  transition:transform .8s;
}
.new-list{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));transform-origin:left center}
.story-list{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));transform-origin:right center}
.home-container.split .new-list{transform:translateX(-100%)}
.home-container.split .story-list{transform:translateX(100%)}


/* ============================================================================
   14.  Overlay system (original rules kept)
============================================================================ */
.overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.9);overflow-y:auto;
  z-index:9999;gap:0;scrollbar-width:none;
}
.overlay::-webkit-scrollbar{display:none}
.overlay.expanded{display:flex;opacity:1;visibility:visible}

.overlay-content{
  flex:0 0 auto;width:auto;height:100%;background:#fff;overflow:hidden;
}
#leftContent{flex:0 0 20%;display:flex;flex-direction:column;height:100%}
#middleContent{flex:0 0 40%}
#rightContent{flex:0 0 40%}
#leftTextContent,#middleTextContent,#rightTextContent{
  flex:0 0 auto;height:100%;background:#fff;overflow:auto;
  display:flex;flex-direction:column;justify-content:center;text-align:center;
  scrollbar-width:none;
  padding: 20px 40px 40px;   /*   ↑↑ 40 px bottom room   */
}
#leftTextContent::-webkit-scrollbar,
#middleTextContent::-webkit-scrollbar,
#rightTextContent::-webkit-scrollbar{display:none}

/* Ensure that if content is long, it starts at the top */
#leftTextContent > *,
#middleTextContent > *,
#rightTextContent > * {
  max-height: 100%;
  overflow-y: auto;
  align-self: flex-start;
  text-align: left;
  width: 100%;
}

#middleTextContent p,
#rightTextContent p {
  text-align: justify;
}

/* List styling within overlay content */
#leftTextContent ul,
#middleTextContent ul,
#rightTextContent ul {
  list-style: none;
  padding-left: 0;
  margin: 10px 0;
}

/* Enhanced hover effects for overlay content */
.overlay-content li{
  opacity:1;
  transition:none;
  margin-bottom: 10px;
  text-align: justify;
}
.overlay-content ul{
  opacity:1;
  transition:none;
}

.overlay-content .prose{
  color:rgba(0,0,0,0.0);
  transition:color 1s ease;
}
.overlay-content .backlinks{
  color:rgba(0,0,0,0.0);
  transition:color 1s ease;
}
.overlay-content a{
  color:rgba(128,128,128,0.0);
  transition:color 1s ease;
}

.overlay-content:hover a{
  color:#808080;
}
.overlay-content:hover .prose,
.overlay-content:hover .backlinks{
  color:#000;
}

/* ============================================================================
   15.  Overlay image + text   (mirrors each thumbnail 1 : 1)
============================================================================ */
.overlay-image-container{
  position: relative;
  width: 100%;                 /* fills the left column               */
  max-width: 70ch;             /* honour your earlier cap             */
  aspect-ratio: 6 / 9;         /* 6×9 = 2/3, identical to thumbnails  */
  margin: 0 auto;              /* centres it if the column is wider   */
}

/* cover image */
.overlay-image{
  width: 100%;
  height: 100%;
  object-fit: cover;           /* same crop behaviour as grid tiles   */
  display: block;
}

/* title that sits over the cover */
.overlay-image-text,
.overlay-text{                 /* keep thumbnails & overlay identical */
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  font-family: 'Helvetica', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .053em;
  text-align: center;
  color: #fff;                 /* white on top of the book art        */
  padding: .2em .2em;

  /* responsive font – same rule you use on the grid tiles */
  font-size: clamp(.8rem, 1.8vw + 5rem, 2rem);
  line-height: 1.25;

  white-space: normal;
  word-break: break-word;
  hyphens: auto;
}

/* ============================================================================
   16.  About layout (removed - not used in index.php)
============================================================================ */

/* -------------------------------------------------------------------------
    DESKTOP  ≥ 600 px
    ------------------------------------------------------------------------- */
@media (min-width: 601px){
  .new-list,
  .story-list{
    grid-template-columns: repeat(5, 1fr);   /* exactly five columns   */
  }
}
/* -------------------------------------------------------------------------
    MOBILE  ≤ 600 px - SIMPLIFIED
    ------------------------------------------------------------------------- */
@media (max-width: 600px) {
  /* Home grid layout - keep side by side */
  .home-container {
    flex-direction: row;
    gap: 0;
  }
  
  .list-container {
    width: 50%;
  }
  
  /* Adjust section titles for narrower containers */
  .section-title {
    font-size: 15px !important;
    padding: 8px 0 !important;
    line-height: 18px !important;
  }
  
  .new-list,
  .story-list {
    grid-template-columns: 1fr 1fr; /* 2 columns instead of 5 */
    gap: 0; /* Keep images flush like desktop */
  }
  
  /* Make overlay text smaller for reduced image size */
  .overlay-text .header-text,
  .overlay-image-text {
    font-size: 15px !important;
    line-height: 1.1 !important;
  }
  
  /* Overlay layout - fixed container with scrollable content */
  .overlay {
    flex-direction: column;
    overflow-y: auto;
    height: 100vh; /* Fixed height container */
    position: fixed; /* Back to fixed positioning */
  }
  
  #leftContent,
  #middleContent,
  #rightContent {
    width: 100%;
    height: auto;
  }
  
  #leftTextContent,
  #middleTextContent,
  #rightTextContent {
    height: auto;
    overflow: visible !important; /* Remove individual scrolling */
    padding: 20px 20px 0px !important; /* Add extra bottom padding for address bar */
    margin: 0 !important; /* Remove any margins */
  }

  #middleTextContent {
    padding: 20px 20px 40px !important; /* Add extra bottom padding for address bar */
  }

  #rightTextContent {
    padding: 20px 20px 80px !important; /* Add extra bottom padding for address bar */
  }
  
  /* Make all text visible on mobile (override hover effects) */
  .overlay-content .prose,
  .overlay-content .backlinks {
    color: #000 !important; /* Always visible */
    transition: none;
    margin: 0 !important; /* Remove any prose margins */
    padding: 0 !important; /* Remove any prose padding */
  }
  
  .overlay-content a {
    color: #808080 !important; /* Always visible */
    transition: none;
  }
  
  /* Ensure content inside text areas uses full width */
  #middleTextContent > *,
  #rightTextContent > * {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
}

    /* BIGGER title on each thumbnail *and* inside the overlay image */
.overlay-text .header-text,
.overlay-image-text{
  font-size: clamp(.75rem, 1vw + .6rem, 1.25rem);   /* phones ≈16 px → 40 px on 1440-px */
  line-height: 1.2;
}
/* ------------- shared base --------------------------------------------- */
.overlay-text .header-text,
.overlay-image-text{
  white-space: normal;
  word-break: break-word;     /* last-resort wrap, no dash            */
  overflow-wrap: anywhere;    /* FF/Edge: break only if word is HUGE  */
}

/* ------------- browsers that honour hyphenate-limit-chars -------------- */
@supports (hyphenate-limit-chars: 4 4 12){
  .overlay-text .header-text,
  .overlay-image-text{
    hyphens: auto;                  /* allow real hyphens               */
    hyphenate-limit-chars: 5 5 15;  /* ≥15 letters & leave 5/5 on split */
  }
}

/* ------------- browsers that DON'T honour it (e.g. Firefox) ------------ */
@supports not (hyphenate-limit-chars: 0 0 0){
  .overlay-text .header-text,
  .overlay-image-text{
    hyphens: manual;                /* ignore dictionary, use only ­ */
  }
}

/* Global scrollbar hiding */
* {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
}
*::-webkit-scrollbar {
  display: none; /* WebKit */
}