/* =========================================================
   HERO
   ========================================================= */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-block: clamp(5.5rem, 11vh, 8.5rem) clamp(1.35rem, 3vh, 2.25rem);
  overflow: hidden;
  background: var(--ink-100);
  isolation: isolate;
}

/* ---------------- the plate ---------------- */

/* One photograph carries stone, plaque and phone. It is anchored to the
   right two-thirds and dissolved into the page along its left edge, so the
   headline sits on true black rather than on a darkened photograph — which
   is the difference between type that is legible and type that is merely
   readable. It is the LCP element: preloaded, WebP ladder, and painted
   over an inlined 24px blur while the real bytes land. */
.hero__plate {
  position: absolute;
  right: 1%;
  /* Lifted clear of the footer strip, so the stat row and the scroll cue
     land on black instead of on the phone. */
  bottom: 12%;
  z-index: -2;

  /* Sized by its own aspect rather than cropped to the container, so the
     stone and the phone both stay whole. `min()` against vh keeps it from
     outgrowing a short laptop viewport, where a width-driven size would
     push the phone off the bottom edge. */
  height: 79%;
  aspect-ratio: 1442 / 1198;
  width: auto;
  max-width: 62%;

  background-color: transparent;
  background-size: cover;
  background-position: center;
  will-change: transform, clip-path;

  /* Feather every edge that meets the page. Two masks intersected, so the
     corners where they meet don't double up into a dark notch. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 11%),
    linear-gradient(180deg, transparent 0%, #000 13%, #000 84%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 11%),
    linear-gradient(180deg, transparent 0%, #000 13%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.hero__plate picture,
.hero__plate img {
  width: 100%;
  height: 100%;
  display: block;
}

.hero__plate img {
  object-fit: cover;
  object-position: center;
}

/* A little extra shadow gathered under the headline column, and a top
   scrim so the nav always has something to sit against. */
.hero__wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(96deg, rgba(6, 5, 4, 0.55) 0%, rgba(6, 5, 4, 0.12) 24%, transparent 44%),
    linear-gradient(180deg, rgba(6, 5, 4, 0.6) 0%, transparent 20%);
  pointer-events: none;
}

.hero .strata-lines {
  z-index: -1;
  opacity: 0.32;
}

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

.hero__inner {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}

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

/* Width is set by the headline, not by the body copy. Sizing this in `ch`
   measures the *serif body* font and clipped "Ancient Stone." mid-word. */
.hero__copy {
  position: relative;
  width: min(100%, 42rem);
  will-change: transform;
}

@media (max-width: 1024px) {
  .hero__copy {
    width: min(100%, 38rem);
  }
}







.hero__eyebrow {
  margin-bottom: clamp(1rem, 2vw, 1.65rem);
}

.hero__title {
  font-size: var(--step-5);
  margin-bottom: clamp(1.25rem, 2.2vw, 1.9rem);
}

.hero__line {
  display: block;
  /* Instrument Serif has deep descenders; give the clip somewhere to go. */
  padding-bottom: 0.06em;
}

/* The headline is two lines by design. Letting it reflow to four collapses
   the whole composition, so above tablet it is not permitted to wrap. */
@media (min-width: 1025px) {
  .hero__line {
    white-space: nowrap;
  }
}

.hero__line--gold {
  color: var(--gold-200);
}

.hero__lede {
  /* Down a step from the display lede: at 20px over four lines it was
     competing with the headline instead of supporting it. */
  font-size: var(--step-0);
  line-height: 1.62;
  max-width: 44ch;
  margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem);
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.6vw, 2.5rem);
  flex-wrap: wrap;
}

/* ---------------- the object ---------------- */









/* Portrait: there is no room for a two-column split, so the plate goes
   full width and sinks behind the copy, with the crop pulled left to keep
   the stone — not the empty water beside it — in frame. */
@media (max-width: 860px) {
  .hero__plate {
    top: auto;
    right: 0;
    bottom: 0;
    height: 62%;
    width: 100%;
    max-width: none;
    aspect-ratio: auto;
    background-position: 42% 40%;
    opacity: 0.5;
    -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 22%);
    mask-image: linear-gradient(0deg, transparent 0%, #000 22%);
  }

  .hero__plate img {
    object-position: 42% 40%;
  }

  .hero__wash {
    background:
      linear-gradient(0deg, rgba(6, 5, 4, 0.9) 0%, rgba(6, 5, 4, 0.45) 40%, rgba(6, 5, 4, 0.2) 70%),
      linear-gradient(180deg, rgba(6, 5, 4, 0.88) 0%, rgba(6, 5, 4, 0.4) 30%, transparent 56%);
  }
}

/* ---------------- footer strip ---------------- */

.hero__foot {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: clamp(1.5rem, 3vw, 3rem);
  will-change: transform;
}

@media (max-width: 1024px) {
  .hero__foot {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 2rem;
  }
}

.hero__notes {
  display: flex;
  gap: clamp(1.5rem, 3.2vw, 3.25rem);
  flex-wrap: wrap;
}

.hero__notes li {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  max-width: 27ch;
}

.hero__note-mark {
  color: var(--gold-300);
  flex: none;
  margin-top: 0.15em;
}

.hero__notes h3 {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-200);
  margin-bottom: 0.45em;
}

.hero__notes p {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--bone-400);
}

.hero__notes p span {
  display: block;
}

@media (max-width: 700px) {
  .hero__notes {
    display: none;
  }
}

/* --- scroll cue --- */

.hero__cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  justify-self: center;
}

.hero__cue-label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bone-400);
  padding-left: 0.3em;
}

.hero__cue-disc {
  position: relative;
  width: clamp(4rem, 6.5vw, 5.25rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: var(--gold-200);
}

.hero__cue-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__cue-type {
  font-family: var(--font-mono);
  font-size: 8.4px;
  letter-spacing: 0.16em;
  fill: var(--gold-300);
  opacity: 0.85;
}

.hero__cue-disc::after {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--rule-strong);
  transition: box-shadow 0.4s var(--ease-out);
}

.hero__cue:hover .hero__cue-disc::after {
  box-shadow: inset 0 0 0 1px var(--gold-300);
}

.hero__cue-arrow {
  position: relative;
  z-index: 1;
}

/* --- stats --- */

.hero__stats {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: clamp(1.1rem, 3.6vw, 3.5rem);
}

/* Three uppercase mono labels at tracking do not fit across a phone.
   Below this the row wraps and the labels drop a step. */
@media (max-width: 560px) {
  .hero__stats {
    gap: 1rem 1.5rem;
  }

  .hero__stats li {
    flex: 1 1 6.5rem;
  }

  .hero__stats span {
    font-size: 0.6rem;
    letter-spacing: 0.12em;
  }
}

@media (max-width: 1024px) {
  .hero__stats {
    justify-content: center;
  }
}

.hero__stats li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.hero__stats strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.4vw, 2.9rem);
  line-height: 0.9;
  color: var(--bone-100);
  letter-spacing: -0.01em;
}

.hero__stats span {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-500);
  text-align: center;
}