/* =====================================================================
   HERO — the top of the homepage.

   Owned by the hero. Other areas must not write rules in here, and
   nothing in here reaches outside #hero.

   Everything is scoped under #hero on purpose: styles.css is the old
   pre-redesign sheet and loads last, so an unscoped class here would
   lose to it. An id beats anything in that file.

   See .claude/design-language.md — §2 (delete), §3 (nothing under
   15px), §5 (photographs are shown bright), §6 (continuous scroll).
   ===================================================================== */

/* ---------------------------------------------------------------------
   THE SCROLL REVEAL

   The landing frame stays pinned under the top bar while the document
   scrolls up over it. The photograph does not move and nothing is
   re-timed — the page simply slides over a held frame, which is what
   gives the scroll its sense of depth.

   This is the ONE scroll effect on the site, and it is deliberately
   limited to the landing frame. No parallax, no scroll-jacking, no
   re-timed animation anywhere else (design-language §7).

   Three parts make it work:
     1. #hero is sticky, pinned below the bar.
     2. It sits at z-index 0, under everything that follows.
     3. Every later section is opaque and above it, so the photograph
        is covered rather than showing through.
   --------------------------------------------------------------------- */
#hero {
  background-color: var(--paper);
  color: var(--ink);
}

/* The sections after the hero. They are siblings inside <main>, so the
   footer (outside <main>) is untouched and keeps its dark ground. */
#hero ~ * {
  position: relative;
  z-index: 1;
  background-color: var(--paper);
}

/* Holding a frame under moving content is motion. Opt out cleanly:
   the hero becomes an ordinary block and the page scrolls flat. */
@media (prefers-reduced-motion: reduce) {
  #hero.hero {
    position: static;
  }
}

/* ---------------------------------------------------------------------
   THE FRAME

   One full-bleed photograph filling the viewport below the top bar,
   with the statement set into it. No paper band, no crisp edge — the
   landing view is the photograph and nothing else.
   --------------------------------------------------------------------- */
#hero.hero {
  /* sticky, not relative — this is the rule that wins (id + class), so
     the reveal has to be declared here. See THE SCROLL REVEAL above. */
  position: sticky;
  top: 0;
  z-index: 0;
  display: block;
  height: 100vh;
  height: 100svh;
  min-height: 30rem;
  overflow: hidden;
}

#hero .hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  /* Slight desaturation only. No brightness reduction (§5). */
  filter: saturate(0.9) contrast(1.04);
}

/* Bottom-weighted, and nothing above the midline. The bench under the
   statement is already the darkest part of the room, so this only has
   to settle the bright specks on it — white paper, lit instrument
   faces — rather than dim the photograph. */
#hero .hero-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Two bands, both ends, nothing in the middle. The top one carries
     the header marks, the bottom one the statement. Between 16% and
     48% the photograph is completely untouched. */
  background:
    linear-gradient(
      to bottom,
      rgba(8, 10, 11, 0.70) 0,
      rgba(8, 10, 11, 0.40) 9%,
      rgba(8, 10, 11, 0) 17%
    ),
    linear-gradient(
      to bottom,
      rgba(8, 10, 11, 0) 48%,
      rgba(8, 10, 11, 0.46) 72%,
      rgba(8, 10, 11, 0.84) 100%
    );
}

/* ---------------------------------------------------------------------
   THE STATEMENT

   Bottom left, white, set into the frame.
   --------------------------------------------------------------------- */
#hero .hero-say {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  padding: 0 1.5rem 2rem;
}

@media (min-width: 640px) {
  #hero .hero-say { padding: 0 3rem 3rem; }
}

#hero .hero-statement {
  margin: 0;
  /* Hug the text so the headline's box is the headline, not the full
     content width — it keeps the shade honest and the hit area sane. */
  width: max-content;
  max-width: 100%;
  text-align: left;
  font-weight: 700;
  /* The floor, not the vw term, is what governs on a phone: at 390px
     10.5vw is only 41px, so 3.9rem takes over and the line fills the
     frame instead of sitting small at the bottom of it. */
  font-size: clamp(3.9rem, 10.5vw, 10rem);
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: #fff;
  font-variation-settings: "opsz" 144;
}

/* ---------------------------------------------------------------------
   SHORT VIEWPORTS
   --------------------------------------------------------------------- */
@media (max-height: 34rem) and (min-width: 640px) {
  #hero.hero { min-height: 0; }
  #hero .hero-statement { font-size: clamp(2.25rem, 7vw, 4rem); }
  #hero .hero-say { padding: 0 3rem 1.75rem; }
}