/* RESET */
* {
  margin: 0;
  min-width: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* CONTAINER */
.story-container {
  position: relative;

  background: url("assets/images/home/19.jpg") center/cover no-repeat;
  background-attachment: scroll;

  min-height: 200vh; /* allow scrolling */
}
.story-container::before {
  content: "";
  position: fixed;
  inset: 0;

  background: rgba(0,0,0,0.25);
  z-index: 1;
}

/* BACK BUTTON */
.back-btn {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 100;

  background: black;
  color: white;
  border: none;

  padding: 10px 16px;
  border-radius: 20px;
  cursor: pointer;
}

/* ================= HERO ================= */

.hero {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;
  z-index: 2;
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-text {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: white;
}

.hero-text h1 {
  font-size: 60px;
  font-family: 'Cormorant Garamond', serif;
}

.hero-text p {
  font-size: 14px;
  letter-spacing: 3px;
}

/* ================= STORY ================= */

.story {
  background: transparent;
  position: relative;
  z-index: 2;
}
/* HEADER */
.story-header {
  position: relative;
  height: 13vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  text-align: center;
  background: linear-gradient(180deg, #c40000, #e50914);
  color: white;

  overflow: visible;
}
.story-header::before {
  content: "";
  position: absolute;
  top: -40px;
  left: 0;
  width: 100%;
  height: 100px;

  background:
    radial-gradient(circle at 10% 50%, #e50914 30%, transparent 31%),
    radial-gradient(circle at 30% 50%, #e50914 30%, transparent 31%),
    radial-gradient(circle at 50% 50%, #e50914 30%, transparent 31%),
    radial-gradient(circle at 70% 50%, #e50914 30%, transparent 31%),
    radial-gradient(circle at 90% 50%, #e50914 30%, transparent 31%);

  background-size: clamp(60px, 10vw, 100px) auto;
  background-repeat: repeat-x;

  z-index: 3;
}
.story-header::after {
  content: "";
  position: absolute;
  bottom: -40px;
  left: 0;
  width: 100%;
  height: 100px;

  background:
    radial-gradient(circle at 10% 50%, white 30%, transparent 31%),
    radial-gradient(circle at 30% 50%, white 30%, transparent 31%),
    radial-gradient(circle at 50% 50%, white 30%, transparent 31%),
    radial-gradient(circle at 70% 50%, white 30%, transparent 31%),
    radial-gradient(circle at 90% 50%, white 30%, transparent 31%);

  background-size: 120px 100px;
  background-repeat: repeat-x;

  z-index: 3;
}
.story-header h4 {
  font-size: 11px;
  letter-spacing: 5px;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 8px;
}

.story-header h1 {
  font-size: 64px;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
}

/* CONTENT */
/* ================= CORE LAYOUT FIX ================= */

.story-content {
  width: 100%;
  padding: 80px 60px;
}

/* CONTAINER CONTROL */
.scene-clean {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 100px;

  max-width: 1100px;
  margin: 0 auto;
}
/* IMAGE */
.scene-left img {
  width: 320px;
  aspect-ratio: 3 / 4;
  object-fit: cover;

  border-radius: 12px;
  transform: rotate(-5deg);
  box-shadow: 0 25px 50px rgba(0,0,0,0.2);

  max-width: 100%;
}

/* RIGHT CONTENT */
.scene-right {
  max-width: 480px;
  width: 100%;
}
/* TITLE */
.scene-right h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 42px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #111;
}
/* RED LINE */
.scene-right h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #e50914;
  margin-top: 12px;
}

/* DESCRIPTION */
.desc {
  font-family: monospace;
  font-size: 15px;
  color: #333;
  line-height: 1.6;
  margin-top: 20px;
}

/* META */
.meta {
  margin-top: 15px;
}

.meta p {
  font-family: monospace;
  font-size: 14px;
  margin-bottom: 6px;
  color: #222;
}

/* RED LABEL */
.meta span {
  color: #e50914;
}

/* LINKS */
.links {
  margin-top: 25px;
  display: flex;
  gap: 15px;
  flex-wrap: wrap; /* 🔥 important */
  justify-content: center;
}

.links a {
  background: #eaeaea;
  color: #111;

  border-radius: 30px;
  padding: 12px 20px;

  font-family: monospace;
  text-decoration: none;
  font-size: 14px;

  transition: 0.3s;
}

.links a:hover {
  background: #ddd;
}
/* TIMELINE SECTION */
.timeline-section {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  padding: 100px 60px;
  gap: 60px;
  width: 100%;
}

/* LEFT */
.timeline-left {
  margin-top: 100px;
}

/* RIGHT */
.timeline-right {
  position: relative;
}
.timeline-left {
  flex: 0 0 50%;
}

.timeline-right {
  flex: 0 0 50%;
  position: relative;
}
/* ITEMS */
.timeline-item {
  position: relative;
  width: 50%;
  margin-bottom: 40px;
}

/* DESKTOP LEFT RIGHT */
.timeline-item:nth-child(odd) {
  margin-left: auto;
  padding-left: 40px;
}

.timeline-item:nth-child(even) {
  margin-right: auto;
  padding-right: 40px;
  text-align: right;
}

/* IMAGE SAFETY */
.timeline-item img {
  width: 150px;
  height: 150px;
  border-radius: 12px;
  max-width: 100%;
}
.timeline-left .year {
  color: #e50914;
  font-size: 14px;
  margin-bottom: 20px;
  margin-top: 120px;
}

.timeline-left h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 34px;
  line-height: 1.4;
  color: #111;
}

/* CENTER LINE */
.timeline-line {
  position: absolute;
  left: 50%;
  top: 60px;;
  bottom: 0;
  width: 2px;
  max-height: 750px;
  background: #ccc;
  transform: translateX(-50%);
}

/* YEAR */
.timeline-item span {
  display: block;
  font-size: 13px;
  color: #777;
  margin-bottom: 10px;
}

/* ================= ANIMATION ================= */
.scroll-text-section {
  width: 100%;
  max-width: 500px; /* instead of fixed width */
}

#scroll-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  line-height: 1.4;
  color: #111;

  width: 100%; /* 🔥 critical fix */
}

/* red highlight */
#scroll-text span {
  color: black;
}

/* smooth reveal */
.typing-char {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.typing-char.visible {
  opacity: 1;
}
.slide-img {
  opacity: 0;
  transform: translateY(-60px);
  transition: 0.8s ease;
}

.slide-img.active {
  opacity: 1;
  transform: translateY(0);
}
/* ================= PROCESS SECTION ================= */
.process-inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}

.process-section {
  position: relative;
  padding: 100px 0;
  text-align: center;
}
/* SMALL TOP TEXT */
.small-note {
  font-size: 18px;
  margin-bottom: 10px;
}

.sub-line {
  font-size: 13px;
  color: #444;
  max-width: 500px;
  margin: 0 auto 40px;
}

/* MAIN TEXT */
.main-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px;
  line-height: 1.4;
  max-width: 700px;
  margin: 0 auto;
  color: #111;
}

.main-text span {
  color: #e50914;
}

/* FLOAT IMAGES BASE */
.float-img {
  position: absolute;

  width: clamp(160px, 18vw, 220px);
  max-width: 100%;

  border-radius: 12px;

  opacity: 0;
  transform: translateY(80px);
  transition: 0.8s ease;
}

/* POSITIONS (ZIG-ZAG STYLE) */

.img-left-top {
  top: 10%;
  left: 5%;
}

.img-right {
  top: 15%;
  right: 6%;
}

.img-center {
  bottom: -10%;
  left: 50%;
  transform: translateX(-50%);
}
/* SIDE NOTE */
.side-note {
  position: absolute;
  right: 8%;
  bottom: 8%;

  font-size: 13px;
  color: #333;

  max-width: 200px; /* 🔥 prevents overflow */
}
.side-note span {
  color: #e50914;
}

/* ACTIVE ANIMATION */
.float-img.active {
  opacity: 1;
  transform: translateY(0);
}
/* ================= TEAM SECTION ================= */

.team-section {
  position: relative;
  padding: 120px 40px 80px;
  text-align: center;
  z-index: 1;
}

.team-section::before {
  content: "";
  position: absolute;
  top: 60px;
  left: 0%;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #aaa, #ddd, #aaa);
  transform: rotate(-3deg);

  z-index: 0;
}
/* FRAME */
.hanging-frame {
  position: relative;
  width: 700px;
  max-width: 90%;
  margin-top: 200px;
  margin: 60px auto 40px;

  transform: translateY(80px);
  opacity: 0;
  transition: 0.8s ease;

  z-index: 2;
}
.hanging-frame img {
  width: 100%;
  display: block;
  border-radius: 6px;
  position: relative;
  z-index: 2;
  box-shadow: 0 30px 60px rgba(0,0,0,0.25);
}

/* CLIPS (fake pins) */
.clip {
  position: absolute;
  top: -125px;
  background: black;
  width: 22px;
  height: 24px;

  border-radius: 5px;
  z-index: 5;
}
/* INNER SLOT (clip opening illusion) */
.clip::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  width: 10px;
  height: 3px;

  background: rgba(255,255,255,0.4);
  border-radius: 2px;

  transform: translateX(-50%);
}

/* STRING (BETTER LOOK) */
.clip::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 50%;
  width: 2px;
  height: 100px;

  background: linear-gradient(#bbb, #999);
  transform: translateX(-50%);
}
.clip.left {
  left: 20%;
}

.clip.right {
  top: -135px;
  right: 20%;
}
.clip.right::before{
  height: 110px;
  }
/* TEXT */
.team-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px;
  color: #111;
}

.team-title span {
  color: #e50914;
}

.team-desc {
  margin-top: 10px;
  font-size: 14px;
  color: #444;
}

/* ANIMATION */
.hanging-frame.active {
  opacity: 1;
  transform: translateY(0);
}
.hanging-frame.active {
  animation: swing 2s ease;
}

@keyframes swing {
  0% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(0) rotate(1deg); }
  50% { transform: translateY(0) rotate(-1deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
/* ================= BIRTH SECTION ================= */
.birth-section {
  padding: 100px 6%;
}

/* GRID */
.birth-wrapper {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 60px;
}

/* LEFT */
.birth-left {
  max-width: 480px;
  width: 100%;
}

/* RIGHT */
.birth-right-wrap {
  position: relative;
  overflow: visible;
  display: inline-block;
}

/* FRONT IMAGE */
.birth-center {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  display: block;
  transform: none;
}
/* TOP */
.location {
  text-align: center;
  font-size: 12px;
  color: #666;
}

.birth-title {
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px;
  line-height: 1.4;
  max-width: 900px;
  margin: 10px auto 80px;
  color: #111;
}

.birth-title span {
  color: #e50914;
}


.birth-left .mini {
  font-size: 12px;
  color: #e50914;
  margin-bottom: 10px;
}

.birth-left h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  line-height: 1.5;
  color: #111;
}

.birth-left h3 span {
  color: #e50914;
}

.birth-left .desc {
  margin-top: 20px;
  font-size: 14px;
  color: #444;
}

.birth-left .desc span {
  color: #e50914;
}

/* ANIMATION */
.birth-center img,
.birth-right img {
  width: 100%;
  height: auto;
  display: block;
}
.film-section {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}
/* WRAPPER */
.film-strip-wrapper {
  width: 100%;
  overflow: hidden;
  background: linear-gradient(to bottom, #000, #111);
  padding: 20px 0;
}

/* STRIP */
.film-strip {
  display: flex;
  gap: 16px;
  width: max-content;
  will-change: transform;
}

/* FRAME */
.film-frame {
  flex: 0 0 clamp(240px, 22vw, 280px);
  aspect-ratio: 16 / 10;

  border-radius: 14px;
  overflow: hidden;

  background: #f5f5f5;
  box-shadow: 0 10px 25px rgba(0,0,0,0.4);

  max-width: 100%;
}
/* IMAGE */
.film-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.film-mid {
  text-align: center;
  font-size: 28px;
  margin: 60px 0;
  font-family: 'Cormorant Garamond', serif;
}

.film-mid span {
  color: #e50914;
}

.film-small {
  text-align: center;
  font-size: 14px;
  margin: 40px 0;
  letter-spacing: 2px;
}

.film-small span {
  color: #e50914;
}
/* LAYOUT */
.story4 {
  display: flex;
  align-items: center;
  gap: 80px;

  max-width: 1100px;
  margin: 80px auto 0;
}

/* LEFT */
.story4-left {
  flex: 1;
}

/* IMAGE */
.story4-left img {
  width: 100%;
  max-width: 500px;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}
/* RIGHT */
.story4-right {
  flex: 1;
  width: 100%;
}
/* SMALL TAG */
.story4-tag {
  font-size: 12px;
  color: #e50914;
  margin-bottom: 10px;
  letter-spacing: 1px;
}

/* TITLE */
.story4-right h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  line-height: 1.5;
  color: #111;
}

.story4-right h2 span {
  color: #e50914;
}

/* DESCRIPTION */
.story4-desc {
  margin-top: 20px;
  font-size: 14px;
  color: #444;
}

/* QUOTE */
.story4-quote {
  margin-top: 20px;
  font-size: 13px;
  color: #666;
  font-style: italic;
}
/* REVERSE (TEXT LEFT, IMAGE RIGHT) */
.story4.reverse {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.story4.reverse .story4-images {
  width: 80%;
  margin: 0 auto 40px;
}

.story4.reverse .story4-images img {
  width: 100%;
  display: block;
  border-radius: 12px;
}

.story4.reverse .story4-text {
  max-width: 700px;
  margin: 0 auto;
}
.story4-text h2 {
  font-family: 'Cormorant Garamond', serif;
  margin-top: -40px;
  font-size: 24px;
  line-height: 1.6;
  color: #111;
}

/* RED HIGHLIGHT */
.story4-text span {
  color: #e50914;
}
.story4-gallery {
  margin-top: 40px;
  padding: 0 80px;
}

/* MASONRY */
.gallery-masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}
/* ITEM */
.gallery-item {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
/* IMAGE */
.story4-image {
  flex: 1;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.story4-image img {
  width: 100%;
  max-width: 500px;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
  margin-top: 30px;
  margin: auto;
}

/* IMAGE */
.gallery-item {
  overflow: hidden;
  border-radius: 12px;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* HOVER */
.gallery-item:hover img {
  transform: scale(1.05);
}

/* OVERLAY */
.overlay {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;

  color: #fff;
  z-index: 2;
}

/* TEXT */
.overlay span {
  font-size: 12px;
  opacity: 0.9;
  letter-spacing: 1px;
}

.overlay h4 {
  font-size: 18px;
  margin-top: 5px;
  font-weight: 600;
}
/* GRADIENT */
.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    to top,
    rgba(0,0,0,0.85) 0%,
    rgba(0,0,0,0.6) 40%,
    rgba(0,0,0,0.2) 70%,
    transparent 100%
  );

  pointer-events: none;
}
/* ================= STORY 5 ================= */

/* TEXT CENTER */
.story5-text {
  text-align: center;
  max-width: 800px;
  width: 100%;
  margin: 0 auto 60px;
}

.story5-text h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  line-height: 1.6;
  color: #111;
}

.story5-text p {
  margin-top: 20px;
  font-size: 14px;
  color: #555;
}

/* GALLERY */
.story5-gallery {
  padding: 0 clamp(20px, 6vw, 80px);
  width: 100%;
}
/* BLACK & WHITE EFFECT */
.gallery-item.bw img {
  filter: grayscale(100%);
  transition: 0.4s ease;
}

/* HOVER → COLOR */
.gallery-item.bw:hover img {
  filter: grayscale(0%);
  transform: scale(1.05);
}

/* REMOVE OVERLAY COMPLETELY */
.gallery-item.bw .overlay {
  display: none;
}
.story + .story {
  margin-top: 60px; /* slightly better spacing */
}
/* ================= SCENE 6 FIX ================= */

.scene6 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;
  gap: 60px;
  padding: 100px 60px;
}

/* LEFT IMAGE */
.scene6-left {
  flex: 1;
}

.scene6-left img {
  width: 100%;
  max-width: 600px;
  object-fit: cover;
  display: block;
}
/* RIGHT TEXT */
.scene6-right {
  flex: 1;
  max-width: 500px;
  width: 100%;
  text-align: center;
  margin: auto;
}

/* TEXT */
.scene6-right p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  line-height: 1.7;
  color: #222;
}

.scene6-right span {
  color: #e50914;
}

/* BUTTONS */
.scene6-buttons {
  display: flex;
  justify-content: center;
  align-items: center;

  gap: 20px;
  flex-wrap: wrap;

  max-width: 500px;
  margin: 40px auto 0;
}

.scene6-buttons a {
  padding: 12px 24px;
  border-radius: 30px;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid #111;
  color: #111;
  transition: 0.3s;
  flex: 0 0 auto;
}

.scene6-buttons a.dark {
  background: #111;
  color: #fff;
}

.scene6-buttons a:hover {
  transform: translateY(-2px);
}
/* ================= SCENE 6 HERO ================= */

.scene6-hero {
  position: relative;
  width: 100%;
  height: 90vh;
  min-height: unset;
  overflow: hidden;
  margin-top: 30px;
}
/* IMAGE */
.scene6-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

/* OVERLAY */
.scene6-hero-overlay {
  position: absolute;
  inset: 0;

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

  text-align: center;
  padding: clamp(40px, 6vw, 60px) clamp(20px, 4vw, 40px);
  color: white;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.75) 0%,
    rgba(0,0,0,0.4) 40%,
    rgba(0,0,0,0.1) 70%,
    transparent 100%
  );
}
/* TEXT */
.scene6-hero-overlay p {
  max-width: 600px;
  color: white;
  width: 100%;
  margin: 0 auto;
}
@media (max-width: 1024px) {

  /* ===== GLOBAL SPACING FIX ===== */
  .story-content {
    padding: 60px 30px;
  }

  .timeline-section {
    padding: 60px 30px;
    gap: 30px;
  }

  .scene-clean {
    gap: 40px;
  }

  .scene6 {
    padding: 60px 30px;
    gap: 40px;
  }

  /* ===== HERO ===== */
  .hero-text h1 {
    font-size: 42px;
  }

  .hero-text p {
    font-size: 12px;
  }

  /* ===== STORY HEADER ===== */
  .story-header h1 {
    font-size: 48px;
  }

  .story-header h4 {
    font-size: 10px;
  }

  /* ===== SCENE CONTENT ===== */
  .scene-left img {
    width: 260px;
  }

  .scene-right h2 {
    font-size: 34px;
  }

  .desc {
    font-size: 14px;
  }

  /* ===== TIMELINE ===== */
  .timeline-left h2 {
    font-size: 28px;
  }

  .timeline-item img {
    width: 120px;
    height: 120px;
  }
  .timeline-line{
  max-height: 600px;
  }
  /* ===== PROCESS SECTION ===== */
  .main-text {
    font-size: 30px;
    max-width: 600px;
  }

  .small-note {
    font-size: 16px;
  }

  .sub-line {
    font-size: 12px;
  }

  /* ===== FLOAT IMAGES ===== */
  .float-img {
    width: clamp(140px, 16vw, 180px);
  }

  /* ===== TEAM ===== */
  .team-title {
    font-size: 30px;
  }

  .hanging-frame {
    width: 600px;
  }

  /* ===== BIRTH SECTION ===== */
  .birth-title {
    font-size: 32px;
  }

  .birth-left h3 {
    font-size: 24px;
  }

  /* ===== FILM STRIP ===== */
  .film-mid {
    font-size: 24px;
  }

  /* ===== STORY 4 ===== */
  .story4 {
    gap: 50px;
  }

  .story4-right h2 {
    font-size: 24px;
  }

  /* ===== GALLERY ===== */
  .story4-gallery {
    padding: 0 40px;
  }

  .gallery-masonry {
    gap: 18px;
  }

  /* ===== STORY 5 ===== */
  .story5-text h2 {
    font-size: 22px;
  }

  /* ===== SCENE 6 ===== */
  .scene6-right p {
    font-size: 18px;
  }

  .scene6-buttons a {
    font-size: 13px;
    padding: 10px 20px;
  }

  /* ===== HERO OVERLAY TEXT ===== */
  .scene6-hero-overlay p {
    font-size: 14px;
  }
}
@media (max-width: 768px) {
  
  /* ===== GLOBAL ===== */
  .story-content {
    padding: 50px 20px;
  }

  .timeline-section {
    flex-direction: column;
    padding: 50px 20px;
    gap: 40px;
  }
  /* ===== TIMELINE LEFT FIX ===== */
.timeline-left {
  margin-top: 0;              /* 🔥 remove fake spacing */
  width: 100%;
  text-align: center;         /* center everything */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* YEAR TEXT */
.timeline-left .year {
  margin-top: 0;
  margin-bottom: 15px;
}

/* HEADING */
.timeline-left h2 {
  font-size: 22px;
  line-height: 1.5;
  max-width: 90%;
}
  /* ===== TIMELINE ROW ===== */
.timeline-right {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-top: 40px;
}

/* ===== LINE ===== */
.timeline-line {
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  transform: none;
}

/* ===== ITEMS ===== */
.timeline-item {
  flex: 1;
  max-width: 150px;   /* 🔥 increased from 80px */
  text-align: center;
}

/* RESET OLD DESKTOP RULES */
.timeline-item:nth-child(even),
.timeline-item:nth-child(odd) {
  margin: 0;
  padding: 0;
  text-align: center;
}

/* YEAR */
.timeline-item span {
  font-size: 12px;
  margin-top: -20px;
  margin-bottom: 8px;
}

/* IMAGE (THIS IS THE REAL FIX) */
.timeline-item img {
  width: 100%;
  height: 130px;     /* 🔥 bigger and visible */
  object-fit: cover;
  border-radius: 12px;
}
  /* ===== HERO ===== */
  .hero-text h1 {
    font-size: 32px;
  }

  .hero-text p {
    font-size: 11px;
    letter-spacing: 2px;
  }

  /* ===== STORY HEADER ===== */
  .story-header {
    height: auto;
    padding: 60px 20px 50px;
  }

  /* FIX WAVE SIZE */
  .story-header::before,
  .story-header::after {
    height: 60px;
    background-size: 80px 60px;
  }

  .story-header::before {
    top: -25px;
  }

  .story-header::after {
    bottom: -25px;
  }

  /* FIX TEXT SPACING */
  .story-header h4 {
    margin-bottom: 6px;
    letter-spacing: 3px;
  }

  .story-header h1 {
    font-size: 32px;
    line-height: 1.2;
    padding: 0 10px;
  }


  /* ===== SCENE CLEAN (MAIN FLEX) ===== */
  .scene-clean {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }

  .scene-left img {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }

  .scene-right {
    max-width: 100%;
  }

.process-section {
  padding: 10px 20px;
}

.main-text {
  margin-bottom: 20px;
}
  /* ===== PROCESS ===== */
.process-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;

  max-width: 600px;   /* 🔥 bigger = better balance */
  margin: 40px auto 0;
}

/* IMAGES */
.process-images img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 14px;
}

/* THIRD IMAGE */
.process-images img:nth-child(3) {
  grid-column: span 2;
  justify-self: center;
  max-width: 70%;   /* 🔥 better proportion */
  height: 180px;
}
  .main-text {
    font-size: 24px;
  }

  /* FLOAT IMAGES REMOVE CHAOS */
  .float-img {
    position: static;
    transform: none;
    margin: 20px auto;
    display: block;
    opacity: 1;
  }

.side-note {
  position: static;
  margin-top: 20px;

  max-width: 200px;
  margin-left: auto;   /* 🔥 pushes it to right */
  text-align: right;   /* 🔥 align text properly */
}
  /* ===== TEAM ===== */
  .team-section {
    padding: 80px 20px;
  }
.team-section::before {
  top: 60px;
  transform: rotate(-2deg);   /* 🔥 reduce tilt */
}
  .clip {
  top: -6px;   /* base alignment */
}

/* LEFT CLIP */
.clip.left {
  top: -100px;   /* 🔥 slightly higher */
}

/* RIGHT CLIP */
.clip.right {
  top: -115px;  /* 🔥 slightly lower (follows slope) */
}
  .clip::before {
  top: 22px;
  height: 80px;   /* 🔥 shorter for mobile */
}
 
  .hanging-frame {
    width: 100%;
    margin-top: 80px;
  }

  /* ===== BIRTH SECTION ===== */
  .birth-wrapper {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .birth-title {
    font-size: 26px;
  }

  /* ===== FILM STRIP ===== */
  .film-frame {
    flex: 0 0 200px;
  }
/* ===== BIRTH SPACING FIX ===== */
.birth-section {
  padding: 20px 20px;   /* 🔥 reduce from large desktop padding */
}

.birth-title {
  margin: 10px auto 40px;   /* 🔥 reduce bottom gap */
  font-size: 24px;
}
.birth-left {
  max-width: 100%;
  text-align: center;     /* 🔥 FIX alignment */
  margin: 0 auto;
}

.birth-left .desc {
  text-align: center;
}
.birth-right-wrap {
  margin-top: 20px;
  margin-bottom: 20px;   /* 🔥 control gap after image */
}

.birth-center {
  max-width: 400px;      /* 🔥 slightly tighter */
}
.birth-section + .story {
  margin-top: 30px;   /* 🔥 reduce gap to next section */
}
  /* ===== STORY 4 ===== */
  .story4 {
    flex-direction: column;
    gap: 30px;
    text-align: center;
  }

  .story4-left img {
    max-width: 100%;
  }

  .story4-right {
    max-width: 100%;
  }

  /* ===== GALLERY (YOUR REQUIREMENT) ===== */
  .gallery-masonry {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .story4-gallery {
    padding: 0 20px;
  }

  /* ===== STORY 5 ===== */
  .story5-text h2 {
    font-size: 20px;
  }

  /* ===== SCENE 6 ===== */
  .scene6 {
    flex-direction: column;
    text-align: center;
    gap: 30px;
    padding: 50px 20px;
  }

  .scene6-left img {
    max-width: 100%;
  }

  .scene6-right {
    max-width: 100%;
  }

  .scene6-right p {
    font-size: 16px;
  }

  .scene6-buttons {
    gap: 12px;
  }

  /* ===== HERO OVERLAY ===== */
  .scene6-hero {
    height: 70vh;
  }

  .scene6-hero-overlay {
    padding: 30px 20px;
  }

  .scene6-hero-overlay p {
    font-size: 13px;
  }
}
@media (max-width: 480px) {

  /* ===== GLOBAL ===== */
  .story-content {
    padding: 40px 15px;
  }
  /* ===== HERO ===== */
  .hero-text h1 {
    font-size: 26px;
  }

  .hero-text p {
    font-size: 10px;
    letter-spacing: 1px;
  }

  /* ===== STORY HEADER ===== */
  .story-header {
    padding: 50px 15px 40px;
    height: 180px;
  }

  .story-header h1 {
    font-size: 26px;
  }

  .story-header h4 {
    margin-top: -30px;
    font-size: 16px;
    letter-spacing: 4px;
  }

  /* ===== TIMELINE ===== */
  .timeline-section {
    padding: 40px 15px;
  }

  .timeline-left h2 {
  max-width: 280px;     /* 🔥 THIS is the key */
  margin: 0 auto;
  line-height: 1.4;
  font-size: 18px;
}

  .timeline-item {
    max-width: 90px;
  }

  .timeline-item img {
    height: 100px;
  }

  .timeline-item span {
    font-size: 10px;
    margin-top: -10px;
  }

  /* ===== SCENE CLEAN ===== */
  .scene-clean {
    gap: 20px;
  }

  .scene-left img {
    max-width: 260px;
  }

  /* ===== PROCESS ===== */
  .process-section {
    padding: 0px 15px;
  }

  .main-text {
    font-size: 20px;
  }

  .process-images {
    max-width: 320px;
    gap: 12px;
  }

  .process-images img {
    height: 120px;
  }

  .process-images img:nth-child(3) {
    max-width: 80%;
    height: 140px;
  }

  /* ===== SIDE NOTE ===== */
  .side-note {
    max-width: 160px;
    font-size: 12px;
  }

  /* ===== TEAM (HANGING FRAME) ===== */
  .team-section {
    padding: 60px 15px 15px;
  }
  .team-title {
  margin-top: 20px;
}

/* Control spacing before next section */
.team-section + .birth-section,
.team-section + .story {
  margin-top: 30px;   /* 🔥 tighten flow */
}

  .hanging-frame {
    margin-top: 80px;
  }

  /* Rope */
  /* ===== TEAM FIX (480) ===== */

/* Rope */
.team-section::before {
  top: 45px;
  transform: rotate(-1deg);
}

/* Frame spacing */
.hanging-frame {
  margin-top: 60px;   /* 🔥 reduce from 80+ */
}

/* Clips */
.clip {
  top: -4px;
}

/* Adjust per side (rope is still slightly angled) */
.clip.left {
  top: -75px;
}

.clip.right {
  top: -79px;
}

/* Strings */
.clip::before {
  height: 50px;   /* 🔥 shorter for small screen */
}
.clip.right::before{
  height: 55px;
}
  /* ===== BIRTH ===== */
  .birth-section {
    padding: 20px 15px;
  }
  .location{
  margin-top: -20px;
}
  .birth-title {
    font-size: 20px;
    margin: 10px auto 30px;
  }

  .birth-left h3 {
    font-size: 20px;
  }

  .birth-left .desc {
    font-size: 13px;
  }

  .birth-center {
    max-width: 260px;
    margin-bottom: -20px;
  }

  /* ===== FILM ===== */
  .film-strip-wrapper {
  padding: 10px 0;   /* 🔥 reduce vertical padding */
}
  .film-frame {
    flex: 0 0 160px;
  }
  .film-mid {
    margin: 15px 0;
    font-size: 20px;
    justify-content: center;
  }

  /* ===== STORY 4 ===== */
  .story4 {
    gap: 20px;
    margin: 10px auto 0;   /* 🔥 from 80px → 30px */
  }
  .story4-left img {
  max-width: 260px;
  border-radius: 12px;
}
  .story4-right h2 {
    font-size: 20px;
  }

  .story4-desc {
    font-size: 13px;
  }
  .story4-text h2{
  font-size: 16px;
}
  /* ===== GALLERY ===== */
  .gallery-masonry {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
 .overlay span {
  font-size: 6px;
  opacity: 0.9;
  letter-spacing: 1px;
}

.overlay h4 {
  font-size: 9px;
  margin-top: 5px;
  font-weight: 600;
}
  /* ===== STORY 5 ===== */
  .story5-text h2 {
    font-size: 18px;
  }

  .story5-text p {
    font-size: 13px;
  }

  /* ===== SCENE 6 ===== */
  .scene6 {
    padding: 40px 15px;
  }

  .scene6-right p {
    font-size: 14px;
  }

  .scene6-buttons a {
    font-size: 12px;
    padding: 8px 16px;
  }

  /* ===== HERO OVERLAY ===== */
  .scene6-hero {
    height: 60vh;
  }

  .scene6-hero-overlay p {
    font-size: 12px;
  }

}
@media(orientation: landscape){
  .story-header {
    height: 220px;
  }
}