/* Homepage atmosphere and section rhythm — uses existing site variables only. */

/* Keep the existing dark-teal palette/grid while gently darkening the outer
   edges and lifting the centre. No new colour tokens are introduced. */
body[data-page="home"]{
  background:
    linear-gradient(90deg,
      color-mix(in srgb,var(--bg) 78%,transparent) 0%,
      color-mix(in srgb,var(--bg) 34%,transparent) 10%,
      transparent 19%,
      transparent 81%,
      color-mix(in srgb,var(--bg) 34%,transparent) 90%,
      color-mix(in srgb,var(--bg) 78%,transparent) 100%),
    radial-gradient(ellipse at 50% 38%,
      color-mix(in srgb,var(--panel) 10%,transparent) 0%,
      transparent 58%),
    radial-gradient(circle at 12% 0%,
      color-mix(in srgb,var(--orange) 6%,transparent),
      transparent 29%),
    linear-gradient(180deg,var(--bg),var(--bg-2) 54%,var(--bg));
}

/* Major homepage sections get a very soft centre band and fading dividers.
   This creates separation without introducing boxed page-break panels. */
body[data-page="home"] .evidence-section,
body[data-page="home"] .home-experience-preview-section,
body[data-page="home"] #lab.lab-section{
  position:relative;
}

body[data-page="home"] .home-experience-preview-section{
  padding:54px 0 58px;
  background:linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb,var(--panel) 5%,transparent) 16%,
    color-mix(in srgb,var(--panel) 7%,transparent) 50%,
    color-mix(in srgb,var(--panel) 5%,transparent) 84%,
    transparent 100%);
}

body[data-page="home"] .home-experience-preview-section::before,
body[data-page="home"] #lab.lab-section::before,
body[data-page="home"] #lab.lab-section::after{
  content:"";
  position:absolute;
  left:50%;
  width:min(92vw,1440px);
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,
    transparent,
    color-mix(in srgb,var(--line) 80%,transparent) 24%,
    var(--line) 50%,
    color-mix(in srgb,var(--line) 80%,transparent) 76%,
    transparent);
  pointer-events:none;
}

body[data-page="home"] .home-experience-preview-section::before,
body[data-page="home"] #lab.lab-section::before{
  top:0;
}

body[data-page="home"] #lab.lab-section::after{
  bottom:0;
}

/* Reduce stacked section padding without changing spacing inside the cards. */
body[data-page="home"] .evidence-section{
  padding-bottom:54px;
}

body[data-page="home"] #lab.lab-section{
  padding-top:58px;
  padding-bottom:58px;
  background:linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb,var(--panel) 3%,transparent) 18%,
    color-mix(in srgb,var(--panel) 4%,transparent) 50%,
    color-mix(in srgb,var(--panel) 3%,transparent) 82%,
    transparent 100%);
}

/* The Lab CTA belongs with the Lab heading, not below the cards. */
body[data-page="home"] #lab .lab-section-head-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;
}

body[data-page="home"] #lab .lab-section-head-row>div{
  min-width:0;
  max-width:790px;
}

body[data-page="home"] #lab .lab-section-header-cta{
  flex:0 0 auto;
  margin-bottom:2px;
  white-space:nowrap;
}

body[data-page="home"] #lab .lab-section-header-cta span{
  display:inline-block;
  transition:transform 180ms ease;
}

body[data-page="home"] #lab .lab-section-header-cta:hover span{
  transform:translate(3px,-3px);
}

/* The section following Lab starts closer to the divider, removing the large
   blank band visible between the Lab cards and the Articles/Projects block. */
body[data-page="home"] #lab.lab-section + .writing-section,
body[data-page="home"] .writing-section{
  padding-top:58px;
}

/* Keep the experience cards visually connected to the section rather than
   floating inside a large empty band. */
body[data-page="home"] .home-experience-preview-grid{
  position:relative;
  z-index:1;
}

@media(max-width:900px){
  body[data-page="home"] #lab .lab-section-head-row{
    align-items:flex-start;
    flex-direction:column;
    gap:18px;
  }

  body[data-page="home"] #lab .lab-section-header-cta{
    margin-bottom:0;
  }
}

@media(max-width:820px){
  body[data-page="home"]{
    background:
      linear-gradient(90deg,
        color-mix(in srgb,var(--bg) 48%,transparent) 0%,
        transparent 10%,
        transparent 90%,
        color-mix(in srgb,var(--bg) 48%,transparent) 100%),
      radial-gradient(ellipse at 50% 38%,
        color-mix(in srgb,var(--panel) 8%,transparent) 0%,
        transparent 62%),
      radial-gradient(circle at 12% 0%,
        color-mix(in srgb,var(--orange) 6%,transparent),
        transparent 29%),
      linear-gradient(180deg,var(--bg),var(--bg-2) 54%,var(--bg));
  }

  body[data-page="home"] .evidence-section{
    padding-bottom:46px;
  }

  body[data-page="home"] .home-experience-preview-section{
    padding:46px 0 50px;
  }

  body[data-page="home"] #lab.lab-section{
    padding-top:50px;
    padding-bottom:50px;
  }

  body[data-page="home"] .writing-section{
    padding-top:50px;
  }
}

@media(max-width:650px){
  body[data-page="home"] .evidence-section{
    padding-bottom:40px;
  }

  body[data-page="home"] .home-experience-preview-section{
    padding:40px 0 44px;
  }

  body[data-page="home"] #lab.lab-section{
    padding-top:44px;
    padding-bottom:44px;
  }

  body[data-page="home"] .writing-section{
    padding-top:44px;
  }

  body[data-page="home"] #lab .lab-section-header-cta{
    width:100%;
  }
}

@media(prefers-reduced-motion:reduce){
  body[data-page="home"] #lab .lab-section-header-cta span{
    transition:none;
  }
}