/* =========================================================

   KRUEGERINVEST — GENERATIONS SUBPAGE

   Four generations.
   Different industries.
   The role did not.

   Page:
   /pages/generations/index.html

   Styles:
   /css/pages/generations-index.css

   ========================================================= */



/* =========================================================

   01 — BASE

   Shared content width and page gutters.

   ========================================================= */

.generations-shell {

  width: 100%;

  max-width: var(--content-max);

  margin-inline: auto;

  padding-inline: var(--page-gutter);

}



/* =========================================================

   02 — HERO

   Opening statement and economic progression.

   ========================================================= */

.generations-hero {

  min-height: 88vh;

  display: flex;

  align-items: flex-end;

  padding-block:
    clamp(10rem, 16vw, 15rem)
    clamp(6rem, 9vw, 9rem);

  background: var(--color-off);

  color: var(--color-indigo);

}


.generations-hero-grid {

  display: grid;

  grid-template-columns:
    minmax(9rem, 18%)
    minmax(0, 1fr);

  gap: clamp(3rem, 7vw, 8rem);

  align-items: start;

}


.generations-kicker {

  padding-top: 0.5rem;

  font-size: 0.72rem;

  font-weight: 600;

  letter-spacing: 0.14em;

  line-height: 1;

}


.generations-hero-content {

  max-width: 62rem;

}


.generations-hero-title {

  margin: 0;

  max-width: 12ch;

  font-size: clamp(3.4rem, 7.4vw, 7.5rem);

  font-weight: 400;

  letter-spacing: -0.055em;

  line-height: 0.92;

}


.generations-hero-title span {

  display: block;

}


/* ---------------------------------------------------------
   Economic progression
   Laundry → Manufacturing → Banking & M&A → Technology
   --------------------------------------------------------- */

.generations-economies {

  margin-top: clamp(4rem, 7vw, 7rem);

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap:
    0.7rem
    clamp(0.8rem, 1.5vw, 1.5rem);

  max-width: 50rem;

  font-size: clamp(0.9rem, 1.2vw, 1.05rem);

  line-height: 1.5;

  letter-spacing: -0.01em;

}



/* =========================================================

   03 — GENERATION SECTIONS

   Each generation uses the same three-column structure:

   1. Year / Name / Field
   2. Portrait
   3. Story

   ========================================================= */

.generation {

  padding-block: clamp(7rem, 11vw, 12rem);

}


/* ---------------------------------------------------------
   Background variants
   --------------------------------------------------------- */

.generation-light {

  background: var(--color-off);

  color: var(--color-indigo);

}


.generation-greige {

  background: var(--color-travertine);

  color: var(--color-indigo);

}


.generation-indigo {

  background: var(--color-indigo);

  color: var(--color-off);

}



/* ---------------------------------------------------------
   Generation layout
   --------------------------------------------------------- */

.generation-grid {

  display: grid;

  grid-template-columns:
    minmax(10rem, 18%)
    minmax(12rem, 21%)
    minmax(0, 1fr);

  gap: clamp(2.5rem, 4.5vw, 5.5rem);

  align-items: start;

}



/* =========================================================

   04 — GENERATION META

   Year, name and economic field.

   ========================================================= */

.generation-meta {

  position: sticky;

  top: 8rem;

}


.generation-year {

  margin-bottom: 1.25rem;

  font-size: 0.72rem;

  font-weight: 600;

  letter-spacing: 0.14em;

  line-height: 1;

  opacity: 0.72;

}


.generation-name {

  max-width: 14rem;

  font-size: clamp(1.3rem, 2vw, 1.8rem);

  font-weight: 500;

  letter-spacing: -0.03em;

  line-height: 1.05;

}


.generation-field {

  margin-top: 0.8rem;

  font-size: 0.86rem;

  line-height: 1.4;

  opacity: 0.65;

}



/* =========================================================

   05 — GENERATION IMAGE

   Historical image or contextual photograph.
   The caption identifies the scene without
   turning the image into decoration.

   ========================================================= */

.generation-portrait {

  width: 100%;

  margin: 0;

}


/* ---------------------------------------------------------
   Image
   --------------------------------------------------------- */

.generation-portrait img {

  width: 100%;

  aspect-ratio: 4 / 5;

  display: block;

  object-fit: cover;

  object-position: center;

  border-radius: 4px;

}


/* ---------------------------------------------------------
   Image caption
   --------------------------------------------------------- */

.generation-photo-caption {

  max-width: 24rem;

  margin-top: 0.7rem;

  font-size: 0.62rem;

  font-weight: 400;

  line-height: 1.45;

  letter-spacing: 0.02em;

  opacity: 0.5;

}


/* ---------------------------------------------------------
   Future portrait images

   When a real image is inserted, it automatically fills
   the existing portrait field.

   --------------------------------------------------------- */

.generation-portrait img {

  width: 100%;

  height: 100%;

  display: block;

  object-fit: cover;

  object-position: center;

}



/* =========================================================

   06 — GENERATION STORY

   Main narrative for each generation.

   ========================================================= */

.generation-story {

  max-width: 50rem;

}


.generation-story p {

  margin: 0;

}


.generation-story p + p {

  margin-top: clamp(1.75rem, 3vw, 2.5rem);

}



/* ---------------------------------------------------------
   Lead statement
   --------------------------------------------------------- */

.generation-lead {

  max-width: 22ch;

  font-size: clamp(2.1rem, 4vw, 4rem);

  font-weight: 400;

  letter-spacing: -0.045em;

  line-height: 1;

}



/* ---------------------------------------------------------
   Supporting copy
   --------------------------------------------------------- */

.generation-story
p:not(.generation-lead):not(.generation-statement) {

  max-width: 38rem;

  font-size: clamp(1rem, 1.35vw, 1.15rem);

  line-height: 1.65;

  opacity: 0.78;

}



/* ---------------------------------------------------------
   Closing statement within each generation
   --------------------------------------------------------- */

.generation-statement {

  padding-top: clamp(3rem, 5vw, 5rem);

  font-size: clamp(1.75rem, 3.5vw, 3.4rem);

  font-weight: 500;

  letter-spacing: -0.04em;

  line-height: 1.05;

}



/* =========================================================

   07 — CONTINUITY

   The central conclusion:

   Not the company.
   Not the industry.
   Not the business model.

   The role.

   ========================================================= */

.continuity {

  padding-block: clamp(9rem, 14vw, 15rem);

  background: var(--color-white);

  color: var(--color-indigo);

}


.continuity-grid {

  display: grid;

  grid-template-columns:
    minmax(9rem, 18%)
    minmax(0, 1fr);

  gap: clamp(3rem, 7vw, 8rem);

}


.continuity-label {

  padding-top: 0.5rem;

  font-size: 0.72rem;

  font-weight: 600;

  letter-spacing: 0.14em;

  line-height: 1;

}


.continuity-content {

  max-width: 58rem;

}



/* ---------------------------------------------------------
   What did NOT continue
   --------------------------------------------------------- */

.continuity-negatives {

  font-size: clamp(2rem, 4.7vw, 4.6rem);

  font-weight: 400;

  letter-spacing: -0.05em;

  line-height: 1;

}


.continuity-negatives p {

  margin: 0;

}


.continuity-negatives p + p {

  margin-top: 0.25em;

}



/* ---------------------------------------------------------
   The answer
   --------------------------------------------------------- */

.continuity-answer {

  color: var(--color-greige);
  
  margin-top: clamp(3rem, 6vw, 6rem);

  font-size: clamp(4rem, 9vw, 9rem);

  font-weight: 500;

  letter-spacing: -0.065em;

  line-height: 0.85;

}



/* ---------------------------------------------------------
   Explanation
   --------------------------------------------------------- */

.continuity-copy {

  max-width: 39rem;

  margin:
    clamp(4rem, 7vw, 7rem)
    0
    0;

  font-size: clamp(1.05rem, 1.4vw, 1.2rem);

  line-height: 1.65;

}


.continuity-copy + .continuity-copy {

  margin-top: 1.2rem;

}



/* =========================================================

   08 — THE OFFICE

   Connects the family history to the current form
   of KruegerInvest.

   ========================================================= */

.generations-office {

  padding-block: clamp(9rem, 14vw, 14rem);

  background: var(--color-indigo);

  color: var(--color-off);

}


.generations-office-grid {

  display: grid;

  grid-template-columns:
    minmax(9rem, 18%)
    minmax(0, 1fr);

  gap: clamp(3rem, 7vw, 8rem);

}


.generations-office-label {

  padding-top: 0.55rem;

  font-size: 0.72rem;

  font-weight: 600;

  letter-spacing: 0.14em;

  line-height: 1;

}


.generations-office-content {

  max-width: 58rem;

}


.generations-office-content h2 {

  margin: 0;

  font-size: clamp(3rem, 6.5vw, 6.5rem);

  font-weight: 400;

  letter-spacing: -0.055em;

  line-height: 0.95;

}



/* ---------------------------------------------------------
   Current activity
   --------------------------------------------------------- */

.generations-office-actions {

  margin-top: clamp(4rem, 7vw, 7rem);

  display: flex;

  flex-wrap: wrap;

  gap:
    0.5rem
    clamp(1.1rem, 2.3vw, 2.5rem);

  font-size: clamp(1.4rem, 2.6vw, 2.5rem);

  letter-spacing: -0.035em;

  line-height: 1.2;

}


.generations-office-content > p {

  max-width: 39rem;

  margin: 1.2rem 0 0;

  font-size: clamp(1.05rem, 1.35vw, 1.2rem);

  line-height: 1.65;

}



/* ---------------------------------------------------------
   Historical clarification
   --------------------------------------------------------- */

.generations-office-content
> .generations-office-note {

  max-width: 48rem;

  margin-top: clamp(4rem, 7vw, 7rem);

  font-size: clamp(1.65rem, 3vw, 2.8rem);

  line-height: 1.12;

  letter-spacing: -0.035em;

}


.generations-office-content
> .generations-office-note
+ .generations-office-note {

  margin-top: 0.35rem;

}



/* =========================================================

   09 — CLOSING

   Returns to the statement from the homepage.

   ========================================================= */

.generations-closing {

  padding-block:
    clamp(9rem, 15vw, 16rem)
    clamp(6rem, 9vw, 9rem);

  background: var(--color-off);

  color: var(--color-indigo);

}


.generations-closing-inner {

  margin-left:
    calc(18% + clamp(3rem, 7vw, 8rem));

}


.generations-closing-title {

  margin: 0;

  font-size: clamp(4.5rem, 10vw, 10rem);

  font-weight: 500;

  letter-spacing: -0.07em;

  line-height: 0.82;

}


.generations-closing-copy {

  margin:
    clamp(2rem, 4vw, 3.5rem)
    0
    0;

  font-size: clamp(1.2rem, 2vw, 1.8rem);

  letter-spacing: -0.025em;

  line-height: 1.3;

}



/* ---------------------------------------------------------
   Back link
   --------------------------------------------------------- */

.generations-back {

  display: inline-block;

  margin-top: clamp(5rem, 8vw, 8rem);

  color: inherit;

  font-size: 0.9rem;

  text-decoration: none;

  border-bottom: 1px solid currentColor;

  padding-bottom: 0.2rem;

  transition:
    opacity 180ms ease;

}


.generations-back:hover {

  opacity: 0.55;

}


/* =========================================================

   GENERATION STATES
   Past · Present · Future

   ========================================================= */


/* =========================================================
   PAST — WHERE WE COME FROM
   ========================================================= */

.generation-past {
  background: var(--color-white);
  color: var(--color-indigo);
}

.generation-past .generation-lead {
  color: var(--color-travertine);
}


/* =========================================================
   PRESENT — WHAT WE DO
   ========================================================= */

.generation-present {
  background: var(--color-indigo);
  color: var(--color-off);
}

.generation-present .generation-lead {
  color: var(--color-off);
}


/* =========================================================
   FUTURE — WHAT CONTINUES
   ========================================================= */

.generation-future {
  background: var(--color-off);
  color: var(--color-indigo);
}

.generation-future .generation-lead {
  color: var(--color-indigo);
}


/* =========================================================

   10 — RESPONSIVE

   Tablet and mobile layout.

   ========================================================= */

@media (max-width: 800px) {


  /* -------------------------------------------------------
     Hero
     ------------------------------------------------------- */

  .generations-hero {

    min-height: auto;

    padding-top: 10rem;

  }


  /* -------------------------------------------------------
     Collapse all editorial grids
     ------------------------------------------------------- */

  .generations-hero-grid,
  .generation-grid,
  .continuity-grid,
  .generations-office-grid {

    grid-template-columns: 1fr;

    gap: 3rem;

  }


  /* -------------------------------------------------------
     Generation meta no longer sticky
     ------------------------------------------------------- */

  .generation-meta {

    position: static;

  }


  .generation-name {

    max-width: none;

  }


  /* -------------------------------------------------------
     Portrait
     ------------------------------------------------------- */

  .generation-portrait {

    width: min(65%, 18rem);

  }


  /* -------------------------------------------------------
     Hero typography
     ------------------------------------------------------- */

  .generations-hero-title {

    max-width: 9ch;

  }


  .generations-economies {

    max-width: 32rem;

  }


  /* -------------------------------------------------------
     Generation copy
     ------------------------------------------------------- */

  .generation-lead {

    max-width: 18ch;

  }


  /* -------------------------------------------------------
     Closing
     ------------------------------------------------------- */

  .generations-closing-inner {

    margin-left: 0;

  }

}



/* =========================================================

   11 — SMALL MOBILE

   Additional adjustments for narrow screens.

   ========================================================= */

@media (max-width: 520px) {


  /* -------------------------------------------------------
     Economic progression becomes a compact grid
     ------------------------------------------------------- */

  .generations-economies {

    display: grid;

    grid-template-columns: auto 1fr;

    justify-content: start;

  }


  .generations-economies span:nth-child(even) {

    opacity: 0.4;

  }


  /* -------------------------------------------------------
     Generation spacing
     ------------------------------------------------------- */

  .generation {

    padding-block: 6rem;

  }


  /* -------------------------------------------------------
     Portrait
     ------------------------------------------------------- */

  .generation-portrait {

    width: min(72%, 16rem);

  }


  /* -------------------------------------------------------
     Continuity statement
     ------------------------------------------------------- */

  .continuity-answer {

    font-size: clamp(4rem, 22vw, 7rem);

  }

}