.page-home {
  --hero-bg: #101e1c;
  --hero-ink: #f3eee3;
  --hero-muted: #c0c6bb;
  --hero-accent: #dcc49b;
  --hero-button-bg: #dcc49b;
  --hero-button-ink: #15291f;
  --hero-line: #46534a;
  --hero-orbit: #819285;
  --day-progress: 0;
}

/* The body is capped at 1800px on wide screens, so its own background would leave
   the page colour framed by bare canvas. Paint the current hero colour across the
   full viewport behind the layout; it follows the night-to-day tween. */
.page-home::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--hero-bg);
  pointer-events: none;
}

/* Keep the wide-screen body frame in the hero palette instead of the daylight line. */
.page-home { border-inline-color: var(--hero-line); }

.page-home .site-header {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  color: var(--hero-ink);
  background: var(--hero-bg);
  border-color: var(--hero-line);
}

.page-home .site-header .brand svg { color: var(--hero-accent); }
.page-home .site-header nav a::after { background: var(--hero-accent); }
.page-home .site-header .button,
.daylight-hero .button {
  color: var(--hero-button-ink);
  background: var(--hero-button-bg);
  border-color: var(--hero-button-bg);
}

.daylight-hero {
  color: var(--hero-ink);
  background: var(--hero-bg);
}

.daylight-hero .hero-inner {
  height: 100svh;
  min-height: 700px;
  max-height: none;
}

.daylight-hero .hero-copy {
  padding-top: clamp(185px, 17vw, 245px);
}

.daylight-hero .hero-copy p,
.daylight-hero .hero-bottom { color: var(--hero-muted); }
.daylight-hero .project-tag,
.daylight-hero .hero-index { color: var(--hero-accent); }
.daylight-hero .project-tag > span,
.daylight-hero .status-dot { background: var(--hero-accent); }
.daylight-hero .hero-bottom { border-color: var(--hero-line); }
.daylight-hero .hero-art { top: 112px; height: calc(100% - 112px); }
.daylight-hero .art-caption { background: var(--hero-bg); color: var(--hero-muted); }
.daylight-hero .orbit { background: var(--hero-orbit); opacity: .25; }
.daylight-hero .orbit::after { border-color: var(--hero-line); }

.daylight-hero .hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% center;
  transform: scale(1.02);
}

.hero-night { opacity: 1; will-change: opacity; }
.daylight-indicator {
  position: absolute;
  top: 27px;
  right: var(--gutter);
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--hero-muted);
  font-size: 11px;
}
.daylight-track { width: 70px; height: 2px; background: var(--hero-line); }
.daylight-track > span {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  transform: scaleX(var(--day-progress));
  background: var(--hero-accent);
}

/* Keep the navigation visible while GSAP pins the hero. */
.daylight-pinned-header { position: fixed !important; }

@media (max-width: 1000px) {
  .daylight-hero .hero-photo { opacity: 1; }
}

@media (max-width: 700px) {
  .page-home .site-header { height: 76px; }
  .daylight-hero .hero-inner {
    display: flex;
    flex-direction: column;
    height: 100svh;
    min-height: 620px;
    padding-bottom: 52px;
  }
  .daylight-hero .hero-copy { flex: 0 0 auto; padding-top: 104px; }
  .daylight-hero .hero-copy h1 { font-size: clamp(36px, 10vw, 58px); margin-bottom: 15px; }
  .daylight-hero .project-tag { margin-bottom: 17px; }
  .daylight-hero .hero-copy p { font-size: 12px; margin-bottom: 17px; }
  .daylight-hero .hero-copy .button { padding: 10px 16px; min-height: 42px; }
  .daylight-hero .hero-art {
    position: relative;
    top: auto;
    height: auto;
    min-height: 210px;
    flex: 1 1 auto;
    margin-top: 12px;
  }
  .daylight-hero .hero-photo { inset: 0 -25px; }
  .daylight-hero .hero-photo img { object-position: 52% center; }
  .daylight-hero .orbit { width: 130px; height: 130px; }
  .daylight-hero .daylight-indicator { top: 0; font-size: 10px; z-index: 2; }
  .daylight-hero .art-caption { display: none; }
  .daylight-hero .hero-bottom { height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-home {
    --hero-bg: #eae6e0;
    --hero-ink: #242922;
    --hero-muted: #62675d;
    --hero-accent: #294b38;
    --hero-button-bg: #294b38;
    --hero-button-ink: #f5f2ed;
    --hero-line: #cecfc5;
    --hero-orbit: #a6b293;
    --day-progress: 1;
  }
  .hero-night { opacity: 0; }
  .daylight-indicator { display: none; }
}