/* ══════════════════════════════════════════════════════════════════════
   hero-statement.css — index.html hero: a large Cormorant Garamond display
   statement, ragged setting, positioned toward the right of the hero, with
   small looping inline media between words.

   Loaded after style.css, ONLY on index.html. This is the only place using
   this display treatment.
   ══════════════════════════════════════════════════════════════════════ */

/* Hero fills the first viewport (minus the fixed nav) so "Selected work"
   sits fully below the fold. Statement is vertically centred in the band. */
.hs {
  /* Sticky so the statement pins to the viewport and the Selected work panel
     (white bg, z-index:2) scrolls UP and OVERLAPS it — the old scroll feel. */
  position: sticky;
  top: var(--nav-h);
  height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;
  /* Contained within the centre column — leaves the side columns and the
     space around the statement open for scattered objects (tote, etc.). */
  width: 100%;
}

.hs-text {
  width: 100%;                 /* so per-line % indents are relative to the band */
  margin: 0;                   /* it's an <h1> — drop the browser's default margin */
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(1.35rem, 3.1vw, 2.85rem);   /* smaller — leaves room for objects around it */
  line-height: 1.02;
  letter-spacing: -0.04em;     /* Figma -4% */
  color: var(--ink);
}

/* First half left-aligned, second half right-aligned — within the centre column. */
.hs-line { display: block; }
.hs-l { text-align: left; }
.hs-r { text-align: right; }

.hs-arrow {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  font-size: 0.62em;
  vertical-align: 0.16em;
  margin-right: 0.12em;
  color: var(--ink);
}

/* Inline media — sits on the line like a "word": ~0.85em tall, landscape. */
.hs-media {
  display: inline-block;
  height: 0.85em;
  width: calc(0.85em * 1.4);
  vertical-align: middle;
  margin: 0 0.16em;
  border-radius: 4px;
  overflow: hidden;
  background: #cccccc;         /* colour placeholder / video loading fallback */
}
.hs-media video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* The footer now sits alone in the right column — anchor it to the bottom
   (the removed portrait block used to hold the top of the space-between). */
.right-bottom { margin-top: auto; }

/* Responsive: keep the hero ~one viewport tall. Once the three columns stack,
   the statement is the full width of the screen and needs the page gutter of
   its own — without it the setting runs flush into both edges. */
@media (max-width: 900px) {
  .hs { min-height: calc(100svh - var(--nav-h)); padding: 0 var(--gutter); }
}

/* Phone: the line breaks are hand-set for a wide measure, so the type has to
   come down far enough that each one still fits between the gutters rather
   than wrapping into a ragged second line. Reaches the 900px value at 560. */
@media (max-width: 560px) {
  .hs-text {
    font-size: clamp(0.95rem, 4.6vw, 1.35rem);
    overflow-wrap: break-word;
  }
}

/* Reduced motion: the JS won't autoplay; nothing else to do here. */