@import url("https://fonts.googleapis.com/css2?family=B612+Mono:wght@400;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Newsreader:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');


body {
  margin: 0;
  overflow-x: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
               'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  background: linear-gradient(to bottom, #ffffff 0%, #faf3e8 8%, #faf3e8 20%, #faf3e8 91%,  #0E2229 98%, #0E2229 100%);
  /* background:linear-gradient(to bottom, #ffffff 0%, #faf3e8 56%, #6A0201 59%, #0E2229 66%, #faf3e8 69%, #faf3e8 90%, #0E2229 96%, #0E2229 100%); */
  color: #333;
}


/* prevent iOS night mode inversion */
@supports (-webkit-overflow-scrolling: touch) {
  body {
    background-color: #000;
    -webkit-filter: none !important;
    filter: none !important;
    color-scheme: light;
  }

  img, video, svg, canvas {
    -webkit-filter: none !important;
    filter: none !important;
  }
}


/* === Intro Section (Sunset Style) === */
.title-wrapper {
  padding: 250px 0px 0px 30px;
  margin: 0 auto;
  margin-left: 10px;
}

.title-wrapper h1 {
  margin: 0;
  font-size: 38px;
  margin-right: 10px;
  font-family: "Source Serif 4", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  margin-bottom: 30px;
  text-shadow:
      0 0 1px #fff,
      0 0 4px #fff,
      0 0 10px #fff,
      0 0 20px rgba(255, 255, 255, 0.9);
}

.title-wrapper p {
  margin: 0;
  font-size: 1.2rem;
  font-family: 'Lato', sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  line-height: 150%;
}

.intro-section {
  position: relative;
  height: 100%;
  margin-bottom: 100px;
  pointer-events: none;
}


.sticky-graphic {
  position: sticky;
  top: 0;
  height: 100vh; /* fill viewport */
  z-index: 2;
  margin-top: -450px;
}

.graphic {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.parallax-scene {
  position: relative;
  width: 100%;
  height: 110vh;
  overflow: hidden;
}

.layer {
  position: absolute;
  bottom: 10%;
  width: 100%;
  max-width: 1200px;
  pointer-events: none;
  transition: transform 0.1s linear;
}

.layer-buildings,
.layer-mosque,
.layer-tents,
.layer-press {
  pointer-events: none;
}

.sticky-graphic,
.graphic,
.layer {
  pointer-events: none;
}

/* Slight z-index separation to preserve stacking order */
.layer-dust {
  z-index: 1;
  /* opacity: 0.8; */
}
.layer-buildings {
  z-index: 2;
}
.layer-mosque {
  z-index: 3;
}
.layer-tents {
  z-index: 4;
}
.layer-press {
  z-index: 5;
}

/* Optional: smooth blend with background */
.fade-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40vh;
  background: linear-gradient(to bottom, rgba(254,244,234,0) 0%, #fef4ea 70%);
  z-index: 10;
}


/* Background visual */
.intro-visual {
  width: 100%;
  object-fit: cover;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}



/* Sun circle */
.sun-wrapper {
  position: fixed;
  top: 150px;
  left: 20%;
  z-index: -1;
}

.sun {
  width: 120px;
  height: 120px;
  filter: blur(1px);
}



/* Gradient fade overlay */
.fade-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60vh;
  background: linear-gradient(to bottom, rgba(254,244,234,0) 0%, #fef4ea 70%);
  z-index: 1;
}

/* Scroll text area */
.scroll-text {
    position: relative;
    z-index: 1;
    padding: 2rem 3rem;
    font-size: 1.2rem;
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto;
    color: #333;
}

.scroll-paragraph {
  margin-bottom: 30px;
  font-family: 'Newsreader', serif;
  padding: 0.2rem;
  color: black;
text-shadow:
      0 0 1px #fff,
      0 0 4px #fff,
      0 0 10px #fff,
      0 0 20px rgba(255, 255, 255, 0.9);

}


  .scroll-buffer {
    height: 300px;
  }


 .scroll-paragraph a {
    color: #4A0C0B;
  }

  .scroll-paragraph a:hover {
    text-decoration: underline;
  }

.scroll-paragraph:first-of-type {
  margin-top: -50%;
}



/* === Next Section (Static Text) === */
.text-section {
      height: 80px;

}

.text-wrapper {
  max-width: 730px;
  margin: 0 auto;
}


/* === timeline section === */

.timeline-section {
  margin: 60px 10px 50px 20px;
  position: relative;
  padding: 0;
  z-index: 2;
}

.timeline-block {
  margin-bottom: 5px;
  position: relative;
     font-family: "B612 Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* === TIMELINE SECTION === */
.timeline-section {
  margin: 0 10px 50px 20px;
  position: relative;
  padding: 0;
}

/* dashed vertical line (left) */
.timeline-section::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  bottom: 0;
  width: 1px;
  background-image: repeating-linear-gradient(
    to bottom,
    #6A0201 0,
    #6A0201 10px,
    transparent 10px,
    transparent 20px
  );
  mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* keep content above the dashed line */
.timeline-section > * {
  position: relative;
  z-index: 1;
}

/* === TIMELINE BLOCK === */
.timeline-block {
  margin-bottom: 5px;
  position: relative;
  font-family: "B612 Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* === STICKY HEADER === */
.timeline-header {
  position: sticky;
  top: 0;
  background: #fef4ea;
  margin-left: 3px;
  padding: 15px 0px 5px 10px;
  z-index: 5;
  font-family: "B612 Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* ✅ FLEXBOX for headline + date layout */
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

/* dashed horizontal line (top border) */
.timeline-header::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width: 101%;
  height: 1px;
  background-image: repeating-linear-gradient(
    to right,
    #6A0201 0,
    #6A0201 10px,
    transparent 10px,
    transparent 20px
  );
}

/* === HEADLINE === */
.timeline-header .headline {
  flex: 1;
  font-family: "Source Serif 4", serif;
  font-size: 18px;
  font-weight: 400;
  text-align: left;
  margin: 0;
}

.headline a {
  color: inherit;
  font-weight: bold;
  background-color: #faf3e8;
}

/* === DATE === */
.timeline-header .date {
  font-size: 0.95rem;
  text-align: right;
  white-space: nowrap;
  flex: 0 0 auto; /* prevents shrinking */
}

/* === OPTIONAL VARIATIONS === */
.timeline-no-margin {
  margin-top: -50px;
}

.no-line {
  background: none;
  /* margin-top: 20px; */
}



.no-line::before {
  display: none;
}

.timeline-no-margin .headline a {
  background-color: transparent;
}

/* === OPTIONAL bottom dashed line (dummy header) === */




/* Content under sticky header */
.timeline-content {
  padding: 20px 30px 60px 40px;
  line-height: 1.6;
  font-size: 1rem;
}

.last-time {
  padding-bottom: 0;
}

.timeline-content img,
.timeline-content .illustration-placeholder {
  display: block;
    max-width: 100%;
}

/* Optional illustration placeholder */
.illustration-placeholder {
  width: 150px;
  height: 150px;
  background: #ddd;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

/* === map animation === */


/* Strip visibility */
#strip-1, #strip-2, #strip-3, #strip-4, #strip-5 {
  fill: #6A0201;
  fill-opacity: 0; /* start invisible */
  transition: fill-opacity 0.8s ease-in-out;
}

#strip-1.active,
#strip-2.active,
#strip-3.active,
#strip-4.active,
#strip-5.active {
  fill-opacity: 1; /* visible when active */
}

.map-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.5rem 0;
}

.map-info {
  flex: 1;   /* take left space */
  font-size: 0.9rem;
  line-height: 1.4;
  color: #333;
}

.map-name {
  font-weight: 600;
  margin: 0;
}

.map-name a {
  color: inherit;
  font-weight: inherit;
}

.map-name a:hover {
  color: rgb(68, 68, 68);
    text-decoration: underline;
}

.map-name a:focus,
.map-name a:visited {
  color: inherit;
  text-decoration: none;
}



.map-location {
  color: #6A0201;
  margin: 0.3rem 0 0;
}

.map-container {
  width: 120px;   /* adjust to fit your svg */
  height: auto;
  flex-shrink: 0; /* don't shrink map */
}

.map-container svg {
  width: 100%;
  height: auto;
  display: block;
}

.testemonial {
  font-style: italic;
  font-size: 20px;
  font-family: 'Newsreader', serif;
  font-family: 'Newsreader';
  font-weight: 500;
  line-height: 1.5;
  color: #0E2229;
  margin-bottom: 50px;
  }

  .testemonial a {
    color: #6A0201;
    font-weight: 600;
    text-decoration: none;
  }

  .testemonial a:hover {
    text-decoration: underline;
  }

/* Citations / Pull Quotes */
.testemonial.citation {
  font-family: 'Newsreader', serif;  /* elegant serif (already imported) */
  font-style: italic;
  font-size: 29px;
  line-height: 1.5;
  color: #4A0C0B; /* deep muted red tone for warmth */
  margin: 2.5rem 0;
  text-align: center;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

/* Optional: decorative quotation marks */
.testemonial.citation::before,
.testemonial.citation::after {
  content: "“";
  font-family: Georgia, serif;
  font-size: 5rem;
  position: absolute;
  color: #CBB6A8;
  opacity: 0.4;
  line-height: 0;
}

.testemonial.citation::before {
  top: 10px;
  left: -10px;
  content: "“";
  padding: 2px;
}

.testemonial.citation::after {
  bottom: -20px;
  right: 0;
  content: "”";
   padding: 6px;
}


  .update-text {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
                  'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 0.9rem;  
    line-height: 155%;

    color: #6A0201;
  }
  
  /* illustrations apachi */
.helicopter-scene {
  position: relative;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Shared styles */
.helicopter {
  will-change: transform;
  animation: float 4s ease-in-out infinite;
  pointer-events: none;
}

/* Front (bigger) helicopter */
.heli-front {
  z-index: 3;
  height: 100%;
  width: 100%;
}

/* Back (smaller) helicopter */
.heli-back {
  z-index: 2;
  opacity: 0.8;
  animation-delay: 1s;
  position: absolute;
  top:0;
}

/* Floating animation */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* === Ceasfire breaks scene === */

.ceasefire-parallax {
  position: relative;
  height: 200vh;             /* tall scrollable section  */
  background: linear-gradient(180deg,rgba(106, 2, 1, 0) 0%, rgba(106, 2, 1, 1) 28%, rgba(14, 34, 41, 1) 90%, rgba(6, 5, 49, 0) 100%);
  overflow: hidden;
  margin-top: -60px;
}

.ceasefire-parallax .testemonial {
  position: relative;
  z-index: 5;
  padding: 30px 30px 80px 30px;
  font-size: 22px;
  max-width: 600px;
  margin: 0 auto;
  margin-top: 100px;
  margin-bottom: -250px;
  color: white;
}


.flair-layer {
  position: absolute;
  bottom: 10%;
  width: 100%;
  max-width: 1200px;
  pointer-events: none;
  transition: transform 0.1s linear;

}


.ceasefire-bg {
  position: relative;
  /* height: 83%; */
  height: 75%;
}

  



/* sticky container */
.ceasefire-layers {
  position: sticky;
  top: 0;
  height: 70vh;
  width: 100%;
  /* overflow: hidden; */
}


.ceasefire-layers .flair {
  position: absolute;
  left: 0;
  width: 20%;
  height: auto;
  pointer-events: none;
  will-change: transform;
}


/* Z-order */



  .smoke-bottom {
    position: absolute;
    bottom: 250px;
    width: 100%;
    opacity: 1;
    z-index: 1;
}

.flare {
  z-index: 2;
  width: 20%;
  top: 250px;
  mix-blend-mode: screen;
  opacity: 0.9;
}

.sky  { z-index: 3; bottom: 8%; }
.dark-city { z-index: 1; bottom: 80px; }
.people { z-index: 4; bottom: 13%; width: 80%; right: 20px; }
.rock { z-index: 5; bottom: 10%; }

/* place flares in different starting X positions */
.flare:nth-child(1) {
  left: 5%;
    width: 30%;
}

.flare:nth-child(2) {
  left: 25%;
  width: 40%;
 }

.flare:nth-child(3) {
    left: 70%;
    width: 30%;
  }
  
  

/* Rectangle 74 */


/* Tent scene */

.aid-illustration {
  position: relative;
}

.aid-background {
  position: absolute;
  z-index: -1;
  margin-top: 5px;
}

.aid-foreground {
  position: absolute;
  top: 0;
}

.tent-illustration {
  position: relative;
}

.tent-background {
  position: absolute;
  z-index: -1;
}

.tent-foreground {
  position: absolute;
  top: 0;
}

/* === Press Illustration Scene === */
.press-illustration {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin: 0 auto;
}

.press-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.press-layer.bg { z-index: 1; 
position: relative;}


/* Layering */
.press-layer.reporter { z-index: 2; }
.press-layer.target {
  z-index: 3;
  width: 40%;
  height: auto;
  top: 30%;
  left: 30%;
  transition: transform 0.15s ease-out;
}

/* Optional subtle hover scaling for the scene */
@media (hover: hover) {
  .press-illustration:hover .press-layer.target {
    transform: scale(1.05);
  }
}

/* === Eye on Rafah Scene === */

.eye-illustration {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin: 2rem auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.eye-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.eye-layer.bg { z-index: 1; }
.eye-layer.city { z-index: 4; }
.eye-layer.eyeball { 
  z-index: 3; 
  width: 100%;
  height: auto;
  top: 8%;
  /* transition: transform 0.15s ease-out; */
}
.eye-layer.lid { z-index: 3; }



/* === Closing Section === */
.closing-scene {
  position: relative;
  height: 100%;
  /* background: linear-gradient(to bottom, #fdf6ef 0%, #06082d 20%); */
  overflow: hidden;
  margin-bottom: 120px;
  margin-top: 40px;
  
}

/* Wrapper that controls perspective */
.closing-parallax {
  position: sticky;
  top: 0;
  width: 100%;
  height: 40vh;
  overflow: hidden;
}

/* closing scene */

.closing-layer {
  position: absolute;
  bottom: 0;
  width: 100%;
  max-width: none;
  pointer-events: none;
  transition: transform 0.15s ease-out;
  will-change: transform;
}

/* Depth order */
.layer-left-back,
.layer-right-back { 
  z-index: 1; 
  opacity: 0.9; 
}

.layer-left-front,
.layer-right-front { 
  z-index: 2; 
  opacity: 1; 
}

.layer-woman { 
  z-index: 3; 
    width: 150%;
    left: -25%;
}

/* Base placement (mobile-optimized) */
.layer-left-back { 
  width: 100%; 
}

.layer-right-back { 
  width: 100%; 
}

.layer-left-front { 
  width: 100%; 
}

.layer-right-front { 
  width: 100%;
}

/* Text elements */
.closing-text {
  position: relative;
  z-index: 5;
  padding: 0 3rem 2rem;
  line-height: 143%;
  font-family: 'Newsreader';
  color: #fdf6ef;
  font-size: 1.4rem;
  margin-bottom: 60px;
  font-style: italic;
}

.closing-text a {
     color: #fdf6ef;
  
  }




  .closing-text a:hover {
    text-decoration: underline;
  }

.credits {
    color: #b4b4b4;
  font-family: "Source Serif 4", serif;  text-align: right;
  opacity: 0.8;
  bottom: 2rem;
  right: 1rem;
  z-index: 5;
  font-size: 0.9rem;
  text-align: left;
       margin-top: 110px;

}

.credits div {
  line-height: 2;
  margin: 0 auto;
  width: fit-content;
  
}

.credits a {
    color: #b4b4b4;
}

.no-margin {
  margin: 0;
}

.white-type {
  color: #fdf6ef !important;
}


.image-wrapper {
  position: relative;
  max-width: 280px;
  margin: 100px auto 70px;
  margin-left: -10px;
  overflow: visible;
}

.image-credit {
    z-index: 2;
    position: absolute;
    font-size: 12px;
    padding-top: 5px;
}

.image-credit a {
  color: inherit;
  /* text-decoration: none; */
}

/* gray background “shadow” square */
.bg-shadow {
  position: absolute;
  top: -30px;     /* 20px ABOVE the image */
  left: 20px;     /* 20px to the RIGHT */
  width: 100%;
  height: 100%;
  background: #0E2229;
  z-index: 1;
  transform: translateY(0);
  transition: transform 0.1s linear;
}

/* main image above */
.main-image {
  position: relative;
  width: 100%;
  height: auto;
  z-index: 2;
  display: block;
  transform: translateY(0);
  transition: transform 0.1s linear;
}



/* === Desktop Enhancements === */
@media (min-width: 1024px) {
body {
    background: linear-gradient(to bottom, #ffffff 0%,  #faf3e8 8%, #faf3e8 91%,  #0E2229 96%, #0E2229 100%);
      /* background:linear-gradient(to bottom, #ffffff 0%,  #faf3e8 5%, #faf3e8 52%, #6A0201 55%,   #0E2229 62%,  #faf3e8 65%, #faf3e8 90%, #0E2229 96%, #0E2229 100%); */
 }


 .scroll-paragraph {
  margin-bottom: 120px;
}

 .layer {
  bottom: 0;
}

.layer-mosque {
  margin-left: -80px;
}


.parallax-scene {
  height: 116vh;
}

.testemonial {
  font-size: 1.2rem;
}

  .testemonial.citation::before {
  top: 0;
  left: -25px;
  content: "“";
}

.testemonial.citation::after {
  bottom: -10px;
  right: -25px;
  content: "”";
}

.intro-section {
  margin-top: -450px;
  margin-bottom: 230px;
  height: 100%;

}

.image-wrapper {
  max-width: 480px;
  margin-left: auto;
}


/* this wrapper keeps margins consistent on desktop */
.content-wrapper {
    max-width: 920px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .timeline-content {
      padding: 20px 60px 100px ;
  }


.last-time {
  padding-bottom: 0;
}

  .scroll-text {
    max-width: 640px;
    /* margin-left: 28%; */
  }

  .text-wrapper {
    max-width: 640px;
  }

  .timeline-section {
       max-width: 730px;
       margin: 0 auto;
  }

  .timeline-header {
      padding: 20px 0px 10px 55px;
      margin-right: 5px;
  }

  .timeline-header .headline {
    width:fit-content;
    float: none;
  }

  .timeline-header .date {
    float: right;
    text-align: right;
  } 

      .title-wrapper {
      padding: 220px 0px 0px 30px;
      
    }

  
  .title-wrapper h1 {
    font-size: 3rem;
    text-align: center;
    margin-right: 0;
    
  }

  .title-wrapper p {
    font-size: 1.2rem;
  }

  .intro-visual {
  width: 100%;
  object-fit: cover;
  position: absolute;
  bottom: -10%;
  left: 0;
  z-index: 2;
  padding-bottom: 80px;
  
}

  .scroll-text {
    font-size: 1.3rem;
    max-width: 700px;
  }

  .scroll-paragraph {
    margin-bottom: 0px; /* less empty scroll on desktop */
    background: none;
    padding: 0;
  }

  .scroll-paragraph:first-of-type {
        margin-top: 0;
  }

 .scroll-buffer {
    height: 400px;
  }

  .sun {
    width: 150px;
    height: 150px;
    pointer-events: none;
  }

  .sun-wrapper {
    top: 12vh;
    left: 32%;
  }


.press-illustration {
  width: 60%;
}

  /* Allow for slightly deeper separation visually */
  .layer-back {
    opacity: 0.9;
    filter: blur(0.3px);
  }

  .layer-front {
    opacity: 1;
    transform-origin: center;
  }

  .illu-wrapper {
    max-width: 80%;
    margin: 3rem auto;
  }

  .illu-back, .illu-front {
    left: 50%;
    transform: translateX(-50%);
  }

  .closing-scene{
    max-width: 1200px;
    margin: 0 auto;
    margin-bottom: 100px;
  }

  .closing-parallax {
        height: 80vh;
  }

    .closing-text {
    max-width: 600px;
    margin: 0 auto;
    text-align: left;
    padding: 5rem 2rem 0;
    margin-bottom: 100px;
    font-size: 1.4rem;
  }

  /* ceasfire section desktop */

  .ceasefire-parallax {
    height: 200vh; 
  }

.layer-far { 
  z-index: 1;
  opacity: 0.9; 
  top: 0;
}

  .smoke-bottom {
    position: absolute;
    bottom: 20px;
    width: 100%;
    opacity: 0.7;
    z-index: 1;
}

.black-smoke {
  position: absolute;
  bottom: -100px;
  width: 100%;
  height: 40vh;
  background: linear-gradient(to bottom, rgba(14,34,41,1) 0%, rgba(14,34,41,0) 95%,  #faf3e8 100%);
  z-index: 2;
}

.sky  {
  bottom: -50px;
}

.dark-city {
  bottom: 0;
}

.people { 
  bottom: 50px;
  width: 80%;
  right: 0px;
}

.rock {
  bottom: 0;
}

.flare {
  top: 300px;
}


.flare:nth-child(1) {
  left: 15%;
    width: 20%;
}

.flare:nth-child(2) {
  left: 35%;
  width: 28%;
 }

.flare:nth-child(3) {
    left: 75%;
    width: 20%;
  }
  

/* ending scene */
 .layer-woman { 
    width: 100%; 
    left: 0;
  }

  .layer-left-back { 
    width: 100%; 
  }

  .layer-right-back { 
    width: 100%; 
  }

  .layer-left-front { 
    width: 100%; 
  }

  .layer-right-front { 
    width: 100%; 
  }


  .credits {
    text-align: left;
    width: fit-content;
    margin: 50px 0 0 67%;
    font-size: 1rem;
  }


}

@media screen and (min-width: 768px) and (max-width: 1200px) and (orientation: landscape){


  .scroll-buffer {
    height: 400px;
  }


  .scroll-paragraph:first-of-type {
    margin-top: 0;
  }


  /* make layout behave like mobile again */
  .image-wrapper {
    max-width: 50%;
    margin-left: auto;
    margin: 60px auto;

  }

  .main-image {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .bg-shadow {
    top: -20px;
    left: 10px;
  }

  .timeline-section,
  .scroll-text {
    max-width: 90%;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .timeline-content {
    padding: 20px 20px 80px 20px;
  }

  .illu-wrapper,
  .press-illustration,
  .eye-illustration {
    max-width: 50%;
    margin: 2rem auto;
  }

  .closing-text {
    padding: 0 6rem 0;
    line-height: 143%;
    font-size: 1.2rem;
}

  .closing-parallax {
    height: 70vh;
  }


  /* keep credits readable and centered */
  .credits {
    text-align: center;
    margin: 60px auto 0;
  }

}


/* --- Large phones / phablets --- */
@media (min-width: 480px) and (max-width: 767px) {


  .scroll-buffer {
    height: 400px;
  }


@supports (-webkit-touch-callout: none) {
  .intro-section {
    padding-bottom: 70vh !important;
  }

  
}

  /* keep tablet-like layout for these specific elements */
  .illu-wrapper {
    max-width: 80%;
    margin: 2rem auto;
  }

  .image-wrapper {
    max-width: 85%;
    margin: 80px auto;
  }

  .scroll-paragraph:first-of-type {
    margin-top: -90%; /* not as high as mobile, closer to tablet */
  }

    .closing-parallax {
     height: 60vh;
  }

}


@media screen and (min-width: 1600px) {
    .parallax-scene {
    height: 120vh;
  }
}


/* === iPad / Tablet Landscape Fix === */
@media screen and (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {


  .scroll-buffer {
    height: 400px;
  }


  .scroll-paragraph:first-of-type {
    margin-top: 0;
  }


  /* make layout behave like mobile again */
  .image-wrapper {
    max-width: 50%;
    margin-left: auto;
    margin: 60px auto;

  }

  .main-image {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .bg-shadow {
    top: -20px;
    left: 10px;
  }

  .timeline-section,
  .scroll-text {
    max-width: 90%;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .timeline-content {
    padding: 20px 20px 80px 20px;
  }

  .illu-wrapper,
  .press-illustration,
  .eye-illustration {
    max-width: 50%;
    margin: 2rem auto;
  }

  .closing-text {
    padding: 0 6rem 0;
    line-height: 143%;
    font-size: 1.2rem;
}

  .closing-parallax {
    height: 60vh;
  }


  /* keep credits readable and centered */
  .credits {
    text-align: center;
    margin: 60px auto 0;
  }
}

/* === FINAL SECTION BLOCK (after timeline) === */
.last-block {
  position: relative;
  padding: 3rem 1.5rem 3rem 2rem;
  font-family: "B612 Mono", monospace;
  color: #0E2229;
}


/* bottom dashed line (matching the top line in timeline headers) */
.last-block::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;

  background-image: repeating-linear-gradient(
    to right,
    #6A0201 0,
    #6A0201 10px,
    transparent 10px,
    transparent 20px
  );

  pointer-events: none;
  z-index: 0;
}

/* optional: internal text styling */
.last-block p {
  font-family: 'Newsreader', serif;
  font-size: 1.2rem;
  line-height: 1.7;
  margin: 0 auto;
  max-width: 640px;
}


.timeline-block:last-of-type .timeline-header {
  position: relative !important;
  top: auto !important;
  background: none;
  z-index: 1;
}

.non-sticky {
  position: relative !important;
  top: auto !important;
  background: none;
  z-index: 1;
}