/* ----------------------------------------------------- */
/* 1. GLOBAL RESET & BODY */
/* ----------------------------------------------------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  body {
    font-family: 'Courier Prime', Courier, monospace;
    background-color: #fff;
    color: #222;
    line-height: 1.6;
    margin: 40px;
    overflow-x: hidden;
  }
  
  /* ----------------------------------------------------- */
  /* 2. NAVIGATION */
  /* ----------------------------------------------------- */
  nav {
    position: absolute;
    top: 40px;
    left: 40px;
    z-index: 1000;
  }
  
  nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  nav a {
    text-decoration: none;
    color: #222;
    font-weight: bold;
    transition: color 0.3s;
  }
  
  nav a:hover {
    color: #7c309c;
  }
  
 /* Submenu for Writing - Floating Glassmorphism */
.has-submenu {
    position: relative;
}

.has-submenu > a {
    position: relative;
    display: inline-block;
    padding-right: 15px;
}

/* Add a small arrow indicator next to "Writing" */
.has-submenu > a::after {
    content: "▼";
    font-size: 12px;
    margin-left: 8px;
    transition: transform 0.3s ease;
    display: inline-block;
}

/* Rotate arrow when submenu is active */
.has-submenu:hover > a::after {
    transform: rotate(180deg);
}

/* Floating Glassmorphism Menu */
.submenu {
    display: block;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 150px;
    background: rgba(255, 255, 255, 0.2); /* Glass effect */
    backdrop-filter: blur(10px);
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateY(-10px);
}

/* Show the menu smoothly on hover */
.has-submenu:hover .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Submenu items */
.submenu li {
    margin: 5px 0;
}

/* Modern text styling */
.submenu a {
    display: block;
    padding: 8px 12px;
    color: #222;
    text-decoration: none;
    font-weight: bold;
    border-radius: 6px;
    transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}

/* Glow effect on hover */
.submenu a:hover {
    background: rgba(255, 255, 255, 0.3);
    color: #1848a0;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}

  
  /* ----------------------------------------------------- */
  /* 3. SCENE HEADINGS */
  /* ----------------------------------------------------- */
  .scene-heading {
    margin-top: 120px;
    padding: 0 20px;
    margin-bottom: 40px;
  }
  .scene-heading h2 {
    display: flex;
    justify-content: space-between;
    font-size: 1.2rem;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid #999;
    padding-bottom: 5px;
  }
  .scene-heading h2 .scene-number {
    margin-left: 20px;
  }
  
  /* ----------------------------------------------------- */
  /* 4. INTRO SECTION */
  /* ----------------------------------------------------- */
  .intro-section {
    max-width: 800px;
    margin: 40px auto;
    text-align: center;
  }
  .highlighted-name {
    font-size: 1.5rem;
    font-weight: bold;
    color: #d13b53;
  }
  .rotating-word {
    font-weight: bold;
    font-size: 1.6rem;
    color: #d13b53;
  }
  
  /* ----------------------------------------------------- */
  /* 5. BIO CONTAINER (SLIDESHOW & DIALOGUE) */
  /* ----------------------------------------------------- */
  .bio-container {
    display: flex;
    align-items: flex-start;
    max-width: 800px;
    margin: 40px auto;
    gap: 40px;
  }
  .slideshow {
    position: relative;
    width: 350px;
    height: 500px;
    overflow: hidden;
    border-radius: 5px;
  }
  .slideshow .slide {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }
  .slideshow .slide.active {
    opacity: 1;
  }
  .character-dialogue {
    flex: 1;
  }
  .character-dialogue h3 {
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    margin-bottom: 10px;
  }
  .character-dialogue p {
    text-align: left;
    white-space: pre-line;
  }
  
  /* ----------------------------------------------------- */
  /* 6. PROJECTS CONTAINER (FILM & WRITING) */
  /* ----------------------------------------------------- */
  .projects-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 80px;
  }
 /* Make film posters fill their column, remove outline */
.projects-container img {
  width: 100%;         /* fill the flex item */
  height: auto;
  object-fit: cover;   /* crop nicely if needed */
  max-height: none;    /* let it grow if you want */
  border: none;        /* drop the grey outline */
  border-radius: 4px;  /* keep your soft corners */
}

/* (Optional) cap how tall they go */
.film-project img {
  max-height: 300px;   /* bump this up or down to taste */
}

  .film-project, .writing-post {
    flex: 1;
    transition: transform 0.3s;
  }
  .film-project a, .writing-post a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s;
  }
  .film-project a:hover, .writing-post a:hover {
    color: #8fac6a;
  }
  .film-project:hover, .writing-post:hover {
    transform: scale(1.02);
  }
  
  /* ----------------------------------------------------- */
  /* 7. BOOK PROMOTION BLOCK */
  /* ----------------------------------------------------- */
  #book-promo {
    position: relative;
    margin: 200px -40px 100px -40px;
    padding: 20px 40px;
    background-color: #edb84a;
    overflow: visible;
  }
  .book-block {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
  }
  .book-covers {
    display: flex;
    gap: 10px;
    position: relative;
    top: -50px;
  }
  .book-covers img {
    width: 200px;
    height: auto;
    z-index: 2;
  }
  .book-cta {
    text-align: center;
    align-self: center;
    margin-bottom: 0;
    padding: 20px;
  }
  .bodoni-line {
    font-family: 'Bodoni Moda', serif;
    font-size: 2.7rem;
    color: #222;
    display: block;
  }
  .sarabun-line {
    font-family: 'Sarabun', sans-serif;
    font-weight: 700;
    font-size: 2.4rem;
    color: #222;
    display: block;
  }
  .book-cta a {
    text-decoration: none;
    color: #222;
    transition: transform 0.3s, color 0.3s;
  }
  .book-cta a:hover {
    transform: scale(1.05);
    color: #6b4700;
  }
  .ampersand {
    color: #6b4700;
  }
  
  /* ----------------------------------------------------- */
  /* 8. YOUTUBE SECTION */
  /* ----------------------------------------------------- */
  #youtube-section {
    margin-bottom: 80px;
  }
  .youtube-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
  }
  .youtube-cta {
    flex: 0 0 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .youtube-cta img {
    width: 120px;
    height: auto;
    cursor: pointer;
    margin-bottom: 10px;
    transition: transform 0.3s ease;
  }
  .youtube-cta img:hover {
    transform: scale(1.1);
  }
  .youtube-cta a {
    font-family: 'Sarabun', sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    color: #000;
    text-decoration: none;
    transition: color 0.3s, transform 0.3s;
  }
  .youtube-cta a:hover {
    color: #000;
    transform: scale(1.02);
  }
  .youtube-embeds {
    flex: 1;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .youtube-embeds iframe {
    width: 280px;
    height: 168px;
    border: none;
    border-radius: 4px;
  }
  
  /* ----------------------------------------------------- */
  /* 9. FOOTER & FADE TO BLACK */
  /* ----------------------------------------------------- */
  footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 50px;
    padding-top: 10px;
    border-top: 1px solid #ddd;
  }
  .footer-left p,
  .footer-right p {
    margin-bottom: 5px;
  }
  .footer-right {
    text-align: right;
  }
  footer a {
    color: #d13b53;
    text-decoration: none;
    font-weight: bold;
  }
  .fade-to-black {
    text-align: right;
    margin-top: 20px;
    font-size: 1.2rem;
  }
  
  /* ----------------------------------------------------- */
  /* 10. RESPONSIVE ADJUSTMENTS */
  /* ----------------------------------------------------- */
  @media (max-width: 768px) {
    body {
      margin: 20px;
      overflow-x: hidden; /* Prevent horizontal scrolling */
    }
    nav {
      position: static;
      margin: 0;
    }
    nav ul {
      flex-direction: row;
      justify-content: flex-start;
      gap: 20px;
    }
    .scene-heading h2 {
      display: block;
      text-align: center;
    }
    .bio-container {
      flex-direction: column;
      align-items: center;
      margin: 20px auto;
    }
    .bio-container img, .slideshow {
      width: 100%;
      max-width: 400px;
      margin-bottom: 20px;
    }
    .projects-container {
      flex-direction: column;
      gap: 20px;
      margin-bottom: 50px;
    }
    #book-promo {
      margin: 0 -20px 50px -20px;
      padding: 20px;
    }
    .book-block {
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }
    .book-covers {
      top: 0;
      gap: 10px;
    }
    .book-covers img {
      width: 180px;
    }
    #youtube-section {
      margin-bottom: 50px;
    }
    .youtube-container {
      flex-direction: column;
      gap: 20px;
    }
    footer {
      flex-direction: column;
      text-align: center;
      gap: 10px;
    }
    .footer-right {
      text-align: center;
    }
    .fade-to-black {
      text-align: center;
    }
    .read-another {
      flex-direction: column;         /* stack heading + links */
      text-align: center;
      padding: 10px;
      margin: 0 auto; /* Center the section and prevent overflow */
      width: 100%; /* Ensure it spans the viewport width */
      box-sizing: border-box; /* Include padding in width calculation */
    }
  }
  
  /* Overlay base styles */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* Ensures it covers everything before revealing */
    transition: transform 1.2s ease-in-out;
  }
  
  /* Pink overlay for Film section (swipes left to right) */
  .pink-overlay {
    background-color: #d13b53;
    transform: translateX(0);
  }
  
  /* Dark olive green overlay for Writing section (swipes right to left) */
  .green-overlay {
    background-color: #587a33;
    transform: translateX(0);
  }
  
  /* When revealed */
  .reveal-left {
    transform: translateX(100%);
  }
  
  .reveal-right {
    transform: translateX(-100%);
  }
  
  /* Ensure each section is positioned relatively so overlays stay inside */
  .in-film,
  .in-writing {
    position: relative;
    overflow: hidden; /* Prevents horizontal scroll issues */
  }
  
/* ----------------------------------------------------- */
/* ARTICLE PAGE STYLING */
/* ----------------------------------------------------- */

/* Scene Heading */
.article-heading {
    width: 100%;
    text-align: center;
    margin-top: 120px;
}
.heading-block {
    background-color: #7c309c; /* This will rotate with each article */
    padding: 30px 20px; /* Increased vertical padding for a thicker block */
    max-width: 80%; /* Does not extend to the full margin */
    margin: 0 auto;
    color: white;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center; /* Ensures the numbers are aligned vertically */
    position: relative;
    animation: slideIn 3s ease-out forwards; /* Slide in on load */
}
/* Keyframes for the slide-in effect */
@keyframes slideIn {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Scene numbers and article title styling */
.scene-int, .scene-number {
    font-size: 0.9rem; /* Smaller font for numbers */
}
.heading-block h2 {
    flex: 1;
    text-align: center;
    font-size: 2.5rem; /* Bigger article title */
    margin: 0;
    position: relative;
}

/* Center the left "INT." vertically */
.heading-block h2 span.scene-int {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%); /* vertically centers the text */
}

/* Center the right "1" vertically */
.heading-block h2 span.scene-number {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* Article Body */
.article-body {
    background: white;
    max-width: 800px;
    margin: -20px auto 50px;
    padding: 40px;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
    position: relative;
    z-index: 2;
}
.article-meta {
    font-size: 0.9rem;
    text-transform: uppercase;
    color: #666;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    margin-bottom: 20px;
}
.article-content p {
    font-size: 1.0rem;
    margin-bottom: 15px;
    margin-right: 40px;
    margin-left: 40px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.5s ease-in-out;
}
.article-content p.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Reference Images */
.reference-images {
    text-align: left;
    max-width: 800px;
    margin: 50px auto;
}
.reference-images h3 {
    font-family: 'Inspiration', cursive;
    font-size: 3.5rem;
    transform: rotate(-5deg);
    margin-bottom: 50px; /* Added space between title and images */
}
.image-gallery {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.image-item {
    position: relative;
    max-width: 280px; /* Slightly bigger than before */
}
.image-item img {
    width: 100%;
    border-radius: 10px;
}
.paper-clip {
    content: url('/public/Paperclip.svg');
    position: absolute;
    top: -30px;
    left: 10px;
    width: 50px;
}

/* Comments Section */
/* Comments Section */
.comments-section {
  max-width: 800px;
  margin: 50px auto;
  padding: 20px;
  background: #f8f8f8;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.comments-section h3 {
  font-size: 1.8rem;
  margin-bottom: 15px;
  font-family: "Courier Prime", monospace;
  text-align: center;
}

/* Comment Cards */
.comment-card {
  background: rgba(0, 0, 0, 0.05);
  padding: 12px;
  margin-bottom: 10px;
  border-radius: 5px;
  font-family: "Courier Prime", monospace;
}

/* Comment Form */
#comment-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

#comment-form input,
#comment-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
  font-family: "Courier Prime", monospace;
}

#comment-form textarea {
  min-height: 120px;
  resize: vertical;
}

#comment-form button {
  background: rgba(218, 208, 208, 0.2); /* Light glass effect */
  color: black; /* Keep text visible */
  border: 1px solid rgba(255, 255, 255, 0.4); /* Soft transparent border */
  padding: 10px 15px;
  margin-bottom: 20px;
  font-family: "Courier Prime", monospace;
  font-size: 1rem;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s ease;
  backdrop-filter: blur(10px); /* Frosted glass effect */
  -webkit-backdrop-filter: blur(10px); /* Safari support */
}

#comment-form button:hover {
  background: rgba(255, 255, 255, 0.3); /* Slightly stronger glass effect */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Soft glow effect */
}


/* Read Another */
.read-another {
    background-color: #7c309c; /* Rotate for each page */
    padding: 40px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transform: translateX(100%); /* Start off-screen to the right */
    opacity: 0;
    transition: transform 1s ease-out, opacity 1s ease-out;
}

/* When the element is scrolled into view, we add this class to slide it in */
.read-another.slide-in-on-scroll {
  transform: translateX(0);
  opacity: 1;
}


.read-another h3 {
    font-family: 'Bauer Bodoni', serif;
    font-size: 1.9rem;
    margin-left: 50px;
}
.article-links a {
    font-family: 'Sarabun', sans-serif; /* Set links font to Sarabun */
    font-weight: bold;
    color: white;
    text-decoration: none;
    margin-left: 15px;
}
.article-links a:hover {
    text-decoration: underline;
}

/* Grid layout for the articles in LIST PAGES*/
/* Grid layout for the articles in LIST PAGES */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(300px, 1fr)); /* Two articles per row */
  gap: 100px;
  max-width: 1100px;
  margin: 120px auto;
  margin-right: 80px;
  margin-left: 80px;
  padding: 40px;
  justify-content: center; /* Centers the text cards more */
}

/* Asymmetrical positioning (Right-side articles sit higher) */
.article-card:nth-child(even) {
  transform: translateY(-80px);
}

/* Article Card Styling */
.article-card {
  position: relative;
  background-color: rgba(245, 245, 245, 0.95);
  border-radius: 8px;
  box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.08);
  padding: 25px;
  overflow: visible; 
  max-width: 300px; /* Made text card smaller */
  min-height: 200px; /* Reduced min height */
  margin: 0 auto; /* Ensures better centering */
  margin-bottom: 50px;
  text-align: center; /* Aligns text without favoring any side */
  transition: transform 0.3s ease-in-out;
}

/* Hover Effects: Scale text card & underline title */
.article-card:hover {
  transform: scale(1.05);
}

.card-content h2 a:hover {
  text-decoration: underline;
}

/* Featured Image: Independent & always positioned bottom-right */
.featured-image {
  position: absolute;
  top: 250px; 
  bottom: auto; /* Starts just below the snippet */
  right: -70px;
  width: 65%; /* Adjusted size */
  z-index: 3;
}
.featured-image img {
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
}

/* Thicker Border Frames on ALL Four Corners */
.featured-image::before,
.featured-image::after,
.featured-image span::before,
.featured-image span::after {
  content: "";
  position: absolute;
  width: 35px;
  height: 35px;
  border: 5px solid #7c309c;
  filter: blur(2px);
}

.featured-image::before {
  top: -15px;
  left: -15px;
  border-right: none;
  border-bottom: none;
}
.featured-image::after {
  top: -15px;
  right: -15px;
  border-left: none;
  border-bottom: none;
}
.featured-image span::before {
  bottom: -15px;
  left: -15px;
  border-right: none;
  border-top: none;
}
.featured-image span::after {
  bottom: -15px;
  right: -15px;
  border-left: none;
  border-top: none;
}

/* Card Content */
.card-content {
  position: relative;
  z-index: 2;
  background: transparent;
  padding: 15px;
  border-radius: 8px;
}

/* Title Styling */
.card-content h2 a {
  font-family: 'Courier Prime', monospace;
  font-size: 1.3rem;
  color: #7c309c;
  text-decoration: none;
}

/* Date Styling */
.article-date {
  font-family: 'Courier Prime', monospace;
  font-size: 0.6rem;
  color: #666;
  margin-bottom: 10px;
}

/* Snippet Styling */
.article-snippet {
  font-family: 'Courier Prime', monospace;
  font-size: 0.7rem;
  color: #333;
  max-width: 80%;
  opacity: 0.9;
}

/* ============================= */
/* MOBILE & TABLET STYLES (max‑width: 768px) */
/* ============================= */
@media (max-width: 768px) {
/* Ensure the submenu overlays all page content on small screens */
.has-submenu {
  /* you already have position: relative; here, just bump the stacking context */
  z-index: 1000;
}

.has-submenu .submenu {
  /* absolute child needs an even higher z‑index */
  z-index: 1001;
}

  /* 1. Tighter, two‑line-safe scene heading */
  .scene-heading {
    margin: 40px 20px 20px;
  }
  .scene-heading h2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    font-size: 1rem;
    border-bottom: 1px solid #999;
    padding-bottom: 5px;
    gap: 10px;
  }
  .scene-heading h2 span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .scene-heading h2 .scene-number {
    flex-shrink: 0;
    margin-left: auto;
  }

  /* 2. Intro / rotating‑word stability */
  .intro-section {
    margin: 30px 15px;
  }
  .highlighted-name,
  .rotating-word {
    font-size: 1.3rem;
  }
  .rotating-word {
    display: inline-block;
    height: 1.5em;
    line-height: 1.5em;
    min-width: 150px; /* reserve space for longest word */
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
  }

  /* 3. Book promo: thinner block + half‑peek image */
  #book-promo {
    margin: 60px -20px 40px;
    padding: 10px 20px 20px;
    overflow: visible;
  }
  .book-block {
    flex-direction: column;
    align-items: center;
  }
  .book-covers {
    top: -70px;  /* still peeking */
    justify-content: center;
    gap: 10px;
  }
  .book-covers img {
    width: 140px;
  }
  .book-cta {
    margin-top: -20px;
    padding: 10px;
  }
  .bodoni-line {
    font-size: 1.5rem;
  }
  .sarabun-line {
    font-size: 1.2rem;
  }
  .book-cta a {
    font-size: 1.1rem;
  }

  /* 4. YouTube: stack & center, fix side margins */
  body {
    margin: 20px;
  }
  .youtube-container {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }
  .youtube-embeds {
    justify-content: center;
  }
  .youtube-embeds iframe {
    width: 100%;
    max-width: 320px;
    height: 180px;
  }

  /* 5. Article‑grid: one column & reset asymmetry */
  .articles-grid {
    grid-template-columns: 1fr;
    margin: 40px 10px;
    /*gap: 100px; readd this back if this aint working out for auto space*/
    padding: 0;
  }
  .article-card:nth-child(even) {
    transform: none;
  }
  .article-card {
    max-width: 95%;
    padding: 15px;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.06);
    transition: none;
    overflow: visible;    /* ensure images can spill out */
  }
  .article-card:hover {
    transform: none;
  }
  .article-card:active {
    transform: translateY(-2px);
  }

  /* 6. Featured‑image: lock from the top, free bottom */
  .featured-image {
    position: absolute;
    top: 190px;       /* adjust to sit just below your snippet */
    right: -20px;
    width: 50%;
    z-index: 3;
  }
  .featured-image img {
    border-radius: 8px;
    object-fit: cover;
    width: 100%;
  }
  .featured-image::before,
  .featured-image::after,
  .featured-image span::before,
  .featured-image span::after {
    width: 25px;
    height: 25px;
    border-width: 4px;
  }

  /* 7. Text adjustments */
  .card-content h2 a {
    font-size: 1.1rem;
  }
  .article-date {
    font-size: 0.7rem;
  }
  .article-snippet {
    font-size: 0.8rem;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
/* — Article Content Pages; Scene heading / title block tweaks — */
.article-heading {
  margin-top: 40px;               /* pull it up closer to the nav */
}
.heading-block {
  width: 100vw;         /* span the entire viewport */
  max-width: none;      /* don’t cap it at 80% or anything */
  margin: 0 calc(50% - 50vw); /* center it but remove body margins */
  padding: 30px 20px;   /* your existing vertical/horizontal padding */
  box-sizing: border-box;
}

.heading-block h2 {
  font-size: 1.1rem !important;   /* smaller title */
  line-height: 1.4;               /* tighter line spacing */
  word-break: break-word;         /* allow wrapping */
  position: relative;   /* ensure padding works */
  padding: 0 40px;      /* give 40px of breathing room on left/right */
}
.scene-int,
.scene-number {
  font-size: 0.75rem;             /* shrink the “1. INT.” and “1” */
}

/* — Article body & meta — */
.article-body {
  margin: -10px auto 30px;
  padding: 20px 15px;             /* tighter padding */
  max-width: 95%;
}
.article-meta {
  font-size: 0.7rem;              /* smaller metadata text */
  margin-bottom: 15px;
}
.article-content p {
  margin: 0 15px 15px;          /* reduce L/R margins */
  font-size: 0.8rem;   
}

/* — Reference images centered — */
.reference-images {
  text-align: center;
  margin: 30px auto;
}
.image-gallery {
  justify-content: center;        /* centre the flex items */
}

/* — Comments box smaller & centred — */
.comments-section {
  max-width: 90%;
  margin: 30px auto;
  padding: 15px;
}
.comments-section h3 {
  font-size: 1.4rem;
}
#comment-form input,
#comment-form textarea,
#comment-form button {
  font-size: 0.9rem;
}

/* — “Read Another” stacked & centred — */
.read-another {
  flex-direction: column;         /* stack heading + links */
  text-align: center;
  padding: 10px;
  overflow-x: hidden !important;
}
.read-another h3 {
  font-size: 1.4rem;
  margin-bottom: 10px;
  margin-left: 0;
}
.article-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}
.article-links a {
  font-size: 0.7rem;
  margin: 0;
}
/* ────────────────────────────── */
/* Disable Read‑Another Slide‑in  */
/* ────────────────────────────── */
.read-another {
  /* Override the slide‑in transform/opacity */
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
}

}