@charset "UTF-8";

/* ==========================================================================
   1. Section Header Base
   ========================================================================== */

.history-item {
	padding-bottom: 4rem;
}
.history-item .item-header {
  text-align: center;
  padding: 3rem 1rem 1rem;
}

.history-item .item-header .year {
  font-size: clamp(3rem, 10vw, 4rem);
  font-weight: 800;
  color: var(--text-color);
}

.history-item .item-header .item-title {
  font-family: var(--font-script);
  font-size: clamp(1.6rem, 4vw, 2rem);
  font-weight: 700;
  color: var(--brand-orange);
  line-height: 1.25;
}

.history-item .item-title {
	padding-bottom: 1.5rem; 
}

.history-hero .hero-title{
  transform: translateY(-10%);
}

@media (max-width: 768px){
	 .history-hero .hero-title{
  transform: translateY(-70%);
}
}

/* ==========================================================================
   5. Two-column Layout for History Sections
   ========================================================================== */

.history-two-col {
  display:             grid;
  grid-template-columns: 1fr 1fr;
  gap:                 clamp(2rem, 6vw, 5rem);
  align-items:         center;
  margin:              2rem auto 6rem;
  padding:             0;
  max-width:           1000px;
}

.history-two-col .images {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%; /* s adapte au contenu, ou garde 300px si tu veux forcer */
  position: relative;
}

/* Only style real photos, not icons inside captions */
.history-two-col .images > img,
.history-two-col .images > figure > img {
  position: relative;
  width: 100%;
  object-fit: cover;
  box-shadow: 
    20px 30px 12px rgba(0,0,0,0.18),
    0px 0px 5px rgba(0,0,0,0.15);
  border: 8px solid #fff;
}

.history-photo__arrow img{
  width: 80px;   /* adjust */
  height: auto;
  border: 0;
  box-shadow: none;
  object-fit: contain;
}


.history-two-col .text {
  font-weight: 600;
  color:       var(--text-color);
	width: 100%;
}




/* ==========================================================================
   HERO (framed, rotated, 50vh, more vertical space)
   ========================================================================== */


.history-hero{
  background: var(--bg-light);
  min-height: calc(100svh - 110px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0;
}

.history-hero .hero-title{
  font-size: clamp(4.5rem, 6.5vw, 7.5rem);
  line-height: 1.05;
  color: var(--text-color);
  margin-bottom: 0;
}

/* FRAME rotates */
.history-hero .hero-frame{
  display: inline-block;        
  background: #fff;
  border: 12px solid #fff;
  box-shadow:
    20px 30px 12px rgba(0,0,0,0.18),
    0px 0px 5px rgba(0,0,0,0.15);
  transform: rotate(-7deg);
	width: min(55vw, 850px);
}

/* IMAGE defines size */
.history-hero .hero-photo{
  display: block;
  width: 100%;
  height: auto;
}









/* ==========================================================================
   6. Full-width Images within Sections
   ========================================================================== */

.history-full-img {
  margin-top: 4rem;
}

.history-full-img img {
  display:        block;
  width:          100%;
  height:         70vh;
  object-fit:     cover;
  object-position: center 30%;
}


/* ==========================================================================
   7. Section Backgrounds
   ========================================================================== */

#history-1947, #history-1973 {
  background: var(--bg-light);
}

#history-1962 {
  background-color: var(--brand-orange);
}

.history-hero .hero-title{
  font-family: "santelia-rough-two", sans-serif;
  font-weight: 700; /* Bold Two */
  font-style: normal;
}


/* ==========================================================================
   8. Section-specific Local Overrides
   ========================================================================== */



/* 

1928

*/



#history-1928 {
  background: #fff;
  position: relative;
  overflow: visible;
  padding-bottom: 0rem;
	padding-top: 1rem; 
}

/* Two-column layout */
#history-1928 .history-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 4rem auto 8rem;
  padding: 0 1rem;
}

/* Text column */
#history-1928 .history-two-col .text {
  display: flex;
  align-items: center;
  text-align: right;
}


/* Full-width image below section */
#history-1928 .history-full-img {
  margin-top: 6rem;
}

#history-1928 .history-full-img img {
  height: 85vh;
  object-position: center 60%;
  display: block;
  width: 100%;
  object-fit: cover;
}


.images--1928{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0; /* no flex spacing */
}

/* both photos share a base width */
.images--1928 .history-photo{
  width: clamp(240px, 28vw, 360px);
}

/* back photo */
.images--1928 .history-photo--back{
  transform: rotate(-6deg);
  margin-right: -6vw;   /* overlap control */
  z-index: 1;
}

/* front photo */
.images--1928 .history-photo--front{
  z-index: 2;
  transform: rotate(5deg) translateY(-15px);
}

/* 1928 portrait sizing override */
#history-1928 .images--1928 .history-photo {
   width: 260px;  /* ? SIZE CONTROL */
}

#history-1928 .images--1928 .history-photo img {
  width: 100%;
  height: auto;
}

/* 1928: make sure the grid cell can shrink and doesn't overflow */
#history-1928 .history-two-col .images{
  min-width: 0;          /* important in grid/flex combos */
  justify-self: end;     /* push the images column content to the right */
  padding-left: 2rem;    /* creates a "no-cross" buffer near the gap */
}

/* 1928: align the photo stack to the right within its column */
#history-1928 .images--1928{
  justify-content: flex-end;  /* instead of center */
	justify-content: center;
  align-items: center;
  gap: 0;
}



/* annotation for 1928 portraits */
.history-photo__annotation{
  position: absolute;
  left: 50%;
  bottom: -2.5rem;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
}

#history-1928 .history-full-img {
  margin-top: 0rem;
}

#history-1928 .history-full-img--1928-intro {
  margin-top: 0rem;
}

#history-1928 .history-full-img img {
  height: 95vh;
  object-position: center 10%;
  display: block;
  width: 100%;
  object-fit: cover;
}

#history-1928 .history-full-img--1928-intro img {
  object-position: 75% 45%;
}


/*

1947

*/


#history-1947 {
	padding-bottom: 5rem;
}

#history-1947 .history-two-col .images img:nth-child(1) {
  transform: rotate(5deg);
  width:       90%;
}

/* 

1962 

*/



#history-1962{
  padding: 2rem 0rem; /* was 4rem 6rem (3/4) */
}

#history-1962 .history-two-col{
  grid-template-columns: 1fr;     /* single centered column */
  justify-items: center;
  padding: 0 1rem 0rem;         /* was 6rem (3/4) */
}

#history-1962 .history-two-col .text{
  text-align: center;             /* was right */
  
}

/* Header spacing smaller */
#history-1962 .item-header{
  padding: 2rem 1rem 0.5rem;       /* ? moins haut et bas */
}

/* Force subtitle visible on orange */
#history-1962 .item-header .item-title{
  color: #fff !important;         
}

#history-1962 p{ color:#fff; }




/* 

1973

*/



#history-1973 .history-two-col .images img:nth-child(1) {
  transform: rotate(-5deg);
  width:       85%;
}


/* Fullscreen lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(0,0,0,0.72);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
  z-index: 9999;
}

.lightbox.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.lightbox-img {
  max-width: min(1100px, 92vw);
  max-height: 92vh;
  width: auto;
  height: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  border-radius: 4px;
  background: #fff;
}

.lightbox-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.9);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.lightbox-close:hover {
  background: #fff;
}

[data-lightbox] {
  cursor: zoom-in;
}







/* Carousel full width */


.carousel-1973-1978 {
  position: relative;
  width:    100%;
  overflow: hidden;
  background: #fff;
  padding:    0;
  margin:     0;
}

.carousel-1973-1978-container {
  overflow:   hidden;
  width:      100%;
  max-height: 80vh;
}

.carousel-1973-1978-track {
  display:    flex;
  transition: transform 0.5s ease-in-out;
  width:      100%;
}

.carousel-1973-1978-slide {
  flex:      0 0 100%;
  height:    80vh;
  overflow:  hidden;
}

.carousel-1973-1978-slide img {
  width:          100%;
  height:         100%;
  object-fit:     cover;
  
  display:        block;
}

.carousel-1973-1978-dots {
  position: absolute;
  bottom:   1.5rem;
  left:     50%;
  transform: translateX(-50%);
  display:  flex;
  gap:      0.75rem;
  z-index:  2;
}

.carousel-1973-1978-dots .dot {
  width:           12px;
  height:          12px;
  border-radius:   50%;
  background:      var(--bg-light);
  cursor:          pointer;
  transition:      background 0.3s;
}

.carousel-1973-1978-dots .dot.active {
  background: var(--brand-orange);
}


#history-1973 .history-two-col .images img:nth-child(1){
  transform: rotate(-5deg);
  width: 85%;
  max-width: 420px;
  margin: 0 auto;
  display: block;
}




/* 

1977 

*/



#history-1977 {
  background: var(--bg-light);
  padding-bottom: 2rem; /* overide -> carousel structure reaches lower and needs visual compensation */
}

#history-1977 .history-two-col {
  padding-bottom: 3rem;   /* reduce from 6rem */
}


.carousel-item img { 
	max-width: 100%; 
	max-height: 100%; 
	object-fit: contain; 
}

/* petit carrousel purée */

.puree-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 50%;
  gap: 1.5rem;
  height: clamp(275px, 32vw, 400px); /* même que le cercle */
}

.carousel-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}		

.carousel-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(275px, 32vw, 400px);
  aspect-ratio: 1 / 1;
}

.carousel-wrapper {
  width: clamp(275px, 32vw, 400px);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; /* Clé pour le centrage des éléments à l'intérieur */
}

.carousel-track {
  display: flex;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-item {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.carousel-item.active {
  opacity: 1;
}

.carousel-item img {
  width: 90%;
  height: auto;
  object-fit: contain;
  transform-origin: center;
	display: block;
}

.carousel-item.vertical img{
	width: auto;
  height: 90%;
}

.carousel-item.rot5 img,
.carousel-item.vertical.rot5 img {
	transform: rotate(2deg);
}

.carousel-item.rot-5 img {
	transform: rotate(-5deg);
}

/* Dots sous le carrousel purée */
#history-1977 .carousel-dots {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

#history-1977 .carousel-dots .dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s ease;
  background: transparent; /* pour que seul le contour apparaisse */
  border: 1.4px solid var(--brand-orange);
}

#history-1977 .carousel-dots .dot.active {
  background: var(--brand-orange);
}

#history-1977 {
  background: var(--bg-light);
}

#history-1977 .history-bubbles {
  min-height: 300px;
}



/*

1998

*/



#history-1998 {
  background: #ffffff;
	padding-bottom: 1rem;
}

#history-1998 .history-two-col .images img {
  filter: brightness(1.1);
  transform: rotate(6deg);
  border: 8px solid #ffffff;
}

#history-1998 .history-two-col {
  padding-bottom: 0rem; /* au lieu de 6rem */
}

#history-1998 .history-two-col .text {
  text-align: right;
}


#history-1998 .history-two-col .images{
  display: flex;
  justify-content: center;   /* center inside column */
}

#history-1998 .history-two-col .images img{
  width: 420px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 20%; /* tweak vertical framing */
}



/* =========================
   2010
   ========================= */

#history-2010 {
  background-color: #fff;
}

#history-2010 .history-two-col .images img {
  filter: brightness(1.1);
  transform: rotate(-3deg); /* autre sens: "left side down" */
}

/* (optionnel) si tu veux garder le texte à droite aligné comme 1998 */
#history-2010 .history-two-col .text {
  text-align: left;
}

#history-2010 .history-two-col {
  padding-bottom: 4rem; /* au lieu de 6rem */
}



/*

2020

*/

#history-2020 {
  background: var(--bg-light);
	padding-bottom: 0;
}


#history-2020 .history-two-col .images img {
  filter: brightness(1.1);
  transform: rotate(5deg);
}

#history-2020 .history-two-col .text {
  text-align: right;
}

/* 2020 packshot carousel (no overlap with columns) */
#history-2020 .callout-stage { 
	margin-top: 3rem; padding-bottom: 10rem; 
}

#history-2020 .callout-canvas { 
	position: relative; height: clamp(260px, 32vw, 420px); 
}


/* stacked images: centered via translate, no transitions */
#history-2020 .packshot-img {
  position: absolute;
  left: 50%;
  top:  50%;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  width: 100%;
  height: auto;
  
  transform-origin: 50% 60%;
  opacity: 0;
  pointer-events: none;
}

#history-2020 .packshot-img.active { opacity: 1; }


#history-2020 .callout__hit { cursor: pointer; }


/* CONTENU AU-DESSUS DU HERO */
main{
  position: relative;
  z-index: 1;
}


/* Important : toutes les sections doivent avoir un fond, sinon l'image fixe se voit derrière */
.history-item{
  position: relative;
  z-index: 1;
  background: #fff; /* par défaut */
}





/* =========================================================
   TABLET ONLY (768–1024)
   ========================================================= */
@media (min-width: 768px) and (max-width: 1024px){

  
  /* 2) Portrait Jean-Yves +10% (1998) */
  #history-1998 .history-two-col .images img{
    max-width: min(60vw, 440px); /* 400px -> 440px */
  }

  /* 3) Machine image +15% (2010) */
  #history-2010 .history-two-col .images img{
    max-width: min(60vw, 460px); /* 400px -> 460px */
  }

  /* 4) Compote image +10% (2020) */
  #history-2020 .history-two-col .images img{
    max-width: min(60vw, 440px); /* 400px -> 440px */
  }
}


/* =========================================================
   Callout component (image/carousel + annotation locked to it)
   ========================================================= */

.callout{
  position: relative;
  display: inline-block;
}

/* The clickable/media area */
.callout__preview,
.callout__hit{
  display: block;
  text-decoration: none;
  color: inherit;
}

.callout__img{
  display: block;
  width: 100%;
  height: auto;
}

/* Annotation is positioned RELATIVE TO the callout box */
.callout__annotation{
  position: absolute;
  left: 50%;
  bottom: -2.5rem;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
  pointer-events: none; /* so clicking still hits the media */
}

.callout__caption{
  display: inline-block;
  font-family: var(--font-script);
  font-weight: 800;
  line-height: 1;
  font-size: 1.15rem;
  letter-spacing: 0.7px;
}

/* Arrow asset */
.callout__arrow{
  display: block;
  width: clamp(12px, 16vw, 75px);
  margin: .5rem auto 0;
  transform: scaleX(-1);
}

.callout__arrow img,
.callout__arrow svg{
  display: block;
  width: 100%;
  height: auto;
}

#history-1973 .history-two-col .images{
  min-width: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-self: center;
  padding-left: 0;
  margin: 0 auto 56px;
  overflow: visible;
}


#history-1973 .callout--tomates{
 width: 320px;
  max-width: 100%;
  display: inline-block;

  transform: translateX(5rem) rotate(10deg);
  will-change: transform, filter;
  backface-visibility: hidden;
  filter: drop-shadow(20px 30px 6px rgba(0,0,0,0.18));
  padding: 10rem 0 5rem; 
}

#history-1973 .callout--tomates .callout__img{
	 transform: none;
  width: 100%;
  height: auto;
  display: block;
}


/* Move annotation relative to the callout box */
#history-1973 .callout--tomates .callout__annotation{
  left: 0%;
  bottom: 65%;
  transform: translate(-125%, 50%) rotate(-20deg);
}

#history-1973 .callout__arrow{
  margin-right: 2rem;   /* distance from caption */
}

/* Caption color for this section */
#history-1973 .callout--tomates .callout__caption{
  color: var(--brand-orange);
  
}

#history-1973 .callout-stage{
  display: flex;
  justify-content: center;
}

#history-1973 .callout-canvas{
  display: flex;
  justify-content: center;
}


#history-2020 .callout--packshots{
  /* optional: place it within the canvas */
	 position: relative;
  display: inline-block;
  width: 320px;   /* match visual weight of 1973 */
  max-width: 100%;
	  transform: translateX(-4rem); /* tweak value */
	padding: 18rem 0 5rem;

	
}

#history-2020 .callout--packshots .callout__annotation{
  left: 140%;
  bottom: 60%;
  transform: translate(-90%, 50%) rotate(10deg);
}

#history-2020 .callout--packshots .callout__caption{
  color: var(--brand-orange);
	transform: rotate(-20deg) translateY(-1rem);
}

#history-2020 .callout--packshots .callout__arrow{
  margin-top: .35rem;
	  transform: translateX(-1rem) scaleX(1); /* un-mirror so it points the other way */

}

#history-2020 .callout-canvas{
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 2020 — packshot carousel must have a real box */
#history-2020 .callout__hit{
  display: inline-block; /* anchor becomes a box */
}

#history-2020 .packshot-carousel{
  position: relative;                 /* parent for absolute children */
  width: 250px;
}

/* your stacked images */
#history-2020 .packshot-img{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  width: 100%;
  height: auto;
  transform-origin: 50% 60%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease; /* optional */
}

#history-2020 .packshot-img.active{ opacity: 1; }






@media (max-width: 1024px){

  /* 1) One-column stack everywhere */
  .history-two-col{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0 0 56px;
  }

  .history-two-col .images{
    order: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 24px;
    margin-bottom: 56px;
  }

  .history-two-col .text{
    order: 2;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: var(--p-measure);
  }

  /* 2) Fix 1928 overriding grid */
  #history-1928 .history-two-col{
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
  }
  #history-1928 .history-two-col .text{ text-align: center; }
  #history-1928 .history-two-col .images{ padding-left: 0; justify-self: auto; }

  /* 3) Fixed image sizes (single image sections) */
  .history-two-col .images > img,
  .history-two-col .images > figure > img{
    width: 400px;     /* global fixed */
    max-width: none;
    height: auto;
  }

  /* 4) 1947 + 1973 specific (they used nth-child desktop rules) */
  #history-1947 .history-two-col .images img:nth-child(1),
  #history-1973 .history-two-col .images img:nth-child(1){
    width: 400px;
  }

  /* 5) 1977 carousel fixed */
  #history-1977 .carousel-frame,
  #history-1977 .carousel-wrapper{
    width: 360px;
    height: 360px;
  }
  #history-1977 .carousel-item img{ width: 100%; height: auto; }

  /* 6) Center text for 1998 + 2020 (explicit) */
  #history-1998 .history-two-col .text,
  #history-2020 .history-two-col .text{
    text-align: center;
  }

  /* 7) Last three sections: fixed image tweaks */
  #history-1998 .history-two-col .images > img{
    width: 450px;
    transform: rotate(3deg);
  }
  #history-2010 .history-two-col .images > img{
    width: 430px;
    transform: rotate(-3deg);
  }
  #history-2020 .history-two-col > .images > img{
    width: 450px;
    transform: rotate(5deg);
  }
}

/* =========================================================
   <1024 — SPACING NORMALIZATION PACK (FINAL)
   - Fixes 1998?2010 gap (accumulating padding)
   - Normalizes 2010 and 2020 bottoms to match 1977
   - Keeps your ratio targets:
     HERO top padding 50%
     HERO title?image spacing 70%
     img/carousel?p spacing 150%
     1973 p?caption spacing 70%
     1998/2010 spacing 50%
     2010 bottom space 50%
   ========================================================= */
@media (max-width: 1024px){

  /* -----------------------------
     GLOBAL SECTION RHYTHM
     (this is what prevents gaps from stacking too much)
     ----------------------------- */

  /* 1) Reduce section "tail" so sections don’t double-stack with next header */
  .history-item{
    padding-bottom: 2rem; /* aligns closer to #history-1977 intent */
  }

  /* 2) Reduce header padding so "top of next section" doesn't feel like extra gap */
  .history-item .item-header{
    padding: 2.1rem 1rem 0.7rem; /* 70% of 3rem/1rem */
  }

  /* -----------------------------
     HERO ratios
     ----------------------------- */

  .history-hero{
    /* original desktop: top clamp(220,24vh,300), bottom clamp(180,20vh,260) */
    padding-top:    clamp(110px, 12vh, 150px); /* 50% */
    padding-bottom: clamp(126px, 14vh, 182px); /* 70% */
  }

  .history-hero .hero-title{
    /* original: margin-bottom clamp(120px,12vh,360px) */
    margin-bottom: clamp(84px, 8.4vh, 252px); /* 70% */
  }

  /* -----------------------------
     INTERNAL STACK LAYOUT (already present in your file)
     We refine it so all sections land equally.
     ----------------------------- */

  /* Keep the stacked layout but remove excess bottom padding */
  .history-two-col{
    padding-bottom: 28px; /* 50% of your previous 56px */
  }

  /* -----------------------------
     img/carousel ? paragraph spacing (150%)
     Base reference: use 56px * 1.5 = 84px
     But because we halved .history-two-col padding-bottom above,
     we apply spacing on the media block itself.
     ----------------------------- */

  #history-1928 .history-two-col .images,
  #history-1947 .history-two-col .images,
  #history-1973 .history-two-col .images,
  #history-1998 .history-two-col .images,
  #history-2010 .history-two-col .images,
  #history-2020 .history-two-col .images{
    margin-bottom: 84px; /* 150% */
  }

  /* 1977 uses the mini carousel instead of .images */
  #history-1977 .puree-carousel{
    margin-bottom: 84px; /* 150% */
  }

  /* -----------------------------
     1973: paragraph ? caption spacing 70%
     (tighten the callout block spacing)
     ----------------------------- */

  #history-1973 .callout--tomates{
    padding: 2.8rem 0 3.5rem; /* 70% of 4rem/5rem */
  }

  /* -----------------------------
     FIX #1: 1998 ? 2010 gap too big
     Root cause: section tail + next header + 2010 internal padding competing.
     We already reduced section tail + header globally.
     Now we ALSO force 1998/2010 to have identical bottoms.
     ----------------------------- */

  /* kill any local section padding that makes 1998/2010 inconsistent */
  #history-1998,
  #history-2010{
    padding-bottom: 2rem; /* same as .history-item under this breakpoint */
  }

  /* force any local .history-two-col padding-bottom overrides to match */
  #history-1998 .history-two-col,
  #history-2010 .history-two-col{
    padding-bottom: 28px !important;
  }

  /* -----------------------------
     FIX #2: 2010 bottom space not equal to others (1977)
     Interpreted as: reduce “after content” feel.
     The section + grid now matches others; ensure no extra local rules leak through.
     ----------------------------- */

  #history-2010 .history-two-col{
    margin-bottom: 0 !important;
  }

  /* -----------------------------
     FIX #3 & #4: 2020 spacing (top + bottom) not equal to others (1977)
     Root cause: callout-stage has padding-bottom:10rem (desktop rule).
     We normalize the stage spacing under <1024.
     ----------------------------- */

  #history-2020 .callout-stage{
    margin-top: 2.1rem;    /* 70% of 3rem */
    padding-bottom: 2.8rem;/* bring back to section rhythm (was 10rem!) */
  }

  /* Ensure 2020 section end matches others */
  #history-2020{
    padding-bottom: 2rem; /* align with other sections */
  }
}

/* =========================================================
   <1024 — 2010 spacing correction
   ========================================================= */
@media (max-width: 1024px){

/* =========================================================
   FORCE ZERO SPACE BETWEEN 1998 AND 2010
   ========================================================= */

/* Remove ALL bottom space from 1998 */
#history-1998{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

#history-1998 .history-two-col{
  padding-bottom: 5rem !important;
  margin-bottom: 0 !important;
}




/* Remove ALL top space from 2010 */
#history-2010{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#history-2010 .item-header{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

#history-2010 .history-two-col{
  margin-top: 0 !important;
  padding-top: 0 !important;
}


  /* -----------------------------------------
     2) Center paragraph text in 2010
     ----------------------------------------- */

  #history-2010 .history-two-col .text{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }


  /* -----------------------------------------
     3) Add bottom spacing to 2010
     to match 1977 rhythm
     ----------------------------------------- */

  #history-2010{
    padding-bottom: 6rem; /* aligns with normalized section spacing */
  }

  #history-2010 .history-two-col{
    padding-bottom: 56px; /* match 1977 visual breathing */
  }
	
}

/* =========================================================
   2020 — Give packshot more breathing space
   ========================================================= */

/* Increase vertical canvas */
#history-2020 .callout-canvas{
  min-height: 420px;   /* increase visual stage height */
  padding-bottom: 3rem;
}

/* Let the packshot visually float higher */
#history-2020 .callout--packshots{
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* Add section tail space so it doesn’t collide with footer */
#history-2020{
  padding-bottom: 4rem;
}

/* ==========================================
   1973–1978 carousel — MOBILE horizontal pan
   (keeps full-frame fill)
   ========================================== */
@media (max-width: 768px){

  /* Keep the same height logic as your desktop rules */
  .carousel-1973-1978-container{
    width: 100%;
    max-height: 80vh;
  }

  .carousel-1973-1978-slide{
    height: 80vh;
    overflow: hidden;
  }

  /* Key: per-slide X focus via CSS variable */
  .carousel-1973-1978-slide img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: var(--focus-x, 50%) 37%;
  }

  /* Simple presets */
  .focus-left   { --focus-x: 35%; }
  .focus-center { --focus-x: 50%; }
  .focus-right  { --focus-x: 95%; }

  /* Optional finer steps */
  .focus-25 { --focus-x: 25%; }
  .focus-85 { --focus-x: 85%; }
}

/* ==========================================
   HERO (history page) — <768
   Reduce white frame + make image larger
   ========================================== */
@media (max-width: 768px){

  .history-hero .hero-frame{
    border-width: 8px;           /* was 12px */
    width: min(88vw, 400px);     /* was min(55vw, 850px) -> too small on phones */
  }

  /* keep normal fill behavior */
  .history-hero .hero-photo{
    width: 100%;
    height: auto;
    display: block;
  }
}

/* ==========================================
   1973 "tomates" callout — <768 overrides
   (same move/size tools as desktop)
   ========================================== */
@media (max-width: 768px){

  /* 1) Add space under the whole group */
  #history-1973 .callout-stage{
	  margin-top: 17rem;
    margin-bottom: 2.5rem; /* tweak */
  }

  /* 2) Reduce image size + adjust its placement */
  #history-1973 .callout--tomates{
    width: 270px; /* was 320px */
    transform: translateX(0.75rem) rotate(6deg); /* was translateX(5rem) rotate(10deg) */
    padding: 2.5rem 0 4.25rem; /* keeps breathing room for the annotation */
  }

  /* 3) New caption/arrow position on mobile */
  #history-1973 .callout--tomates .callout__annotation{
    left: 50%;          /* was 0% */
    bottom: 100%;    /* was 80% */
    transform: translateX(-40%) rotate(-25deg); /* was translate(-125%, 50%) rotate(-20deg) */
    white-space: normal; /* optional: allow wrap on small screens */
    max-width: 220px;    /* optional: prevent super wide caption */
  }

  /* 4) Arrow offset (your existing “distance” control) */
  #history-1973 .callout__arrow{
    margin-right: 0;    /* was 2rem */
    margin-top: .65rem; /* small tweak */
	transform: rotate(-5deg) translateX(-90%);
  }
}

@media (max-width: 768px){

  /* Let rotated images breathe (prevents clipping) */
  #history-1977 .carousel-wrapper,
  #history-1977 .carousel-track{
    overflow: visible;
  }

  /* Give a little “air” so it doesn’t touch edges */
  #history-1977 .carousel-frame{
    padding: 10px;
    box-sizing: border-box;
  }
}

/* ==========================================
   2020 "packshots" callout — <768 overrides
   (same move/size tools as desktop)
   ========================================== */
@media (max-width: 768px){

  /* 1) Add space above/below the whole group (for caption sitting above) */
  #history-2020 .callout-stage{
    margin-top: 18rem;     /* increase if it still touches the paragraph above */
    margin-bottom: 0rem;
  }

  /* 2) Reduce packshot size + adjust placement */
  #history-2020 .callout--packshots{
    width: 260px; /* desktop: 320px */
    transform: translateX(0.5rem); /* desktop: translateX(-4rem) */
    padding: 3.5rem 0 4.25rem; /* keeps breathing room */
  }

  /* 3) New caption/arrow position on mobile */
  #history-2020 .callout--packshots .callout__annotation{
    left: 0%;
    bottom: 110%;
    transform: translate(-40%, 0%) rotate(12deg);
    white-space: normal;
    max-width: 220px;
  }

  /* Keep your caption styling tool */
  #history-2020 .callout--packshots .callout__caption{
    transform: rotate(8deg) translateY(-10%);
  }

  /* 4) Arrow offset + rotation/translation tool */
  #history-2020 .callout--packshots .callout__arrow{
    margin-top: .35rem;
    transform: rotate(-6deg) translateX(25%) translateY(4%) scaleX(-1); /* keeps your “un-mirror” intent */
  }
}

#history-2020 .packshot-carousel{
  aspect-ratio: 4 / 5;
}

/* ==========================================
   2020 packshot — add space under <1024
   ========================================== */
@media (max-width: 1023px){

  #history-2020 .callout-stage{
    margin-bottom: 0rem;  /* increase until visually balanced */
  }

}

/* =========================
   TIMELINE SPACER
   ========================= */

.history-timeline-spacer{
  position: relative;
  height: 260px; /* master spacing control */
  background: var(--bg-light);
}

.history-timeline-line{
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  width: 5.5px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,.3) 0 25px,
    transparent 10px 38px
  );
  pointer-events: none;
}

@media (max-width: 1024px){

  .history-hero{
    padding-top: 140px;
    padding-bottom: 70px;
  }

  .history-hero .hero-title{
    margin-bottom: 0;
  }

  .history-timeline-spacer{
    height: 250px; /* adjust */
  }

}

@media (max-width: 768px){

  .history-hero{
    padding-top: 180px;
    padding-bottom: 80px;
  }

  .history-hero .hero-title{
    margin-bottom: 0;
  }

  .history-timeline-spacer{
    height: 250px; /* adjust */
  }
	
	.history-timeline-line{
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  width: 3.5px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,.3) 0 25px,
    transparent 10px 38px
  );
  pointer-events: none;
}
	
	 .history-hero .hero-title{
    font-size: clamp(3.8rem, 13vw, 5rem);
  }
	
}

@media (max-width: 768px){

  /* 1928 – double portraits */
  #history-1928 .images--1928 .history-photo{
    width: 42vw !important;
  }

  /* 1947 */
  #history-1947 .history-two-col .images img:nth-child(1){
    width: 62vw !important;
  }

  /* 1973 portrait */
  #history-1973 .history-two-col .images img:nth-child(1){
    width: 60vw !important;
  }

  /* 1973 newspaper callout */
  #history-1973 .callout--tomates{
    width: 64vw !important;
  }

  /* 1977 small carousel */
  #history-1977 .carousel-frame,
  #history-1977 .carousel-wrapper{
    width: 62vw !important;
    height: 62vw !important;
  }

  /* 1998 portrait */
  #history-1998 .history-two-col .images > img{
    width: 62vw !important;
  }

  /* 2010 machine */
  #history-2010 .history-two-col .images > img{
    width: 75vw !important;
  }

  /* 2020 portrait */
  #history-2020 .history-two-col > .images > img{
    width: 71vw !important;
  }

  /* 2020 packshot callout */
  #history-2020 .callout--packshots{
    width: 33vw !important;
  }
}

@media (max-width: 768px){
  .history-two-col .images > img,
  .history-two-col .images > figure > img{
    border-width: 4px !important;
  }
}

@media (max-width: 767px){

  .history-two-col .text,
  .history-two-col .prose,
  .history-item .text,
  .history-item .prose{
    width: 100%;
    max-width: 100%;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
  }

  .history-two-col .text p,
  .history-two-col .prose p,
  .history-item .text p,
  .history-item .prose p{
    max-width: 50ch;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 767px){

  /* remove extra local side padding */
  #history-1928 .history-two-col{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #history-1962{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #history-1962 .history-two-col{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

}

@media (max-width: 768px){
  #history-2020 .packshot-carousel{
    width: 188px; /* about 25% smaller than 250px */
  }
}

@media (max-width: 768px){

  .carousel-1973-1978-dots{
    bottom: 3rem;
    gap: 3rem;
  }

  .carousel-1973-1978-dots .dot{
    width: 20px;
    height: 20px;
	  background: transparent;
  border: 1.4px solid #fff;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s;
  }
	
.carousel-1973-1978-dots .dot.active {
  background: var(--brand-orange) !important;
  border-color: var(--brand-orange) !important;
}
	
	#history-1977 .carousel-dots {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-top: 5rem;
		
}

#history-1977 .carousel-dots .dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s ease;
  background: transparent;
  border: 1.4px solid var(--brand-orange);
}
	
	
#history-1977 .history-two-col {
  padding-bottom: 0rem;   /* reduce from 6rem */
}
	
	#history-1977 {
  padding-bottom: 0rem;
}
	
	#history-1998 .history-two-col .images img{
    width: 75vw ;
 
}
	

}

@media (max-width: 768px){
  .history-hero{
    min-height: calc(100svh - 76px);
  }
}

@media (max-width: 768px){
  #history-1977 .carousel-dots{
    display: none;
    margin-top: 0;
  }
}