/* Arrival. The photograph is the whole viewport; the words are not laid on top
   of it but cut into it — a rectangle of stone notched out of the lower left,
   the way a room is cut out of a plan. One hairline leaves the top of that
   notch and runs across the picture, which is the first architectural line the
   site draws and the one every later chapter answers. */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  isolation: isolate;
  /* the hairline that leaves the notch is wider than the page on purpose;
     clipping it here keeps it off the document's scroll width */
  overflow: hidden;
}
.hero__photo { position: absolute; inset: 0; overflow: hidden; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hero__photo::after {
  /* a breath of shade top and bottom: the header ink survives the bright sky,
     the property line survives the sunlit deck */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(251,249,244,.55), rgba(251,249,244,0) 30%),
    linear-gradient(to top, rgba(23,32,42,.76), rgba(23,32,42,0) 32%);
}

/* --- the notch ---------------------------------------------------------- */
.hero__panel {
  position: absolute; left: 0; bottom: 0; z-index: 3;
  width: min(37rem, 42vw);
  background: var(--warm-white);
  padding: clamp(2rem, 4vw, 3.4rem) var(--gut) clamp(1.6rem, 3vw, 2.6rem);
  display: grid; gap: clamp(1rem, 2.2vw, 1.8rem);
}
.hero__panel::before {
  /* the line that leaves the notch and crosses the photograph */
  content: ""; position: absolute; left: 0; top: 0; height: 1px;
  width: 100vw; background: rgba(36,37,34,.28);
  transform-origin: 0 50%;
  animation: draw-across 1.9s .5s var(--slow) both;
}
@keyframes draw-across { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero__eyebrow { display: flex; gap: .7em; align-items: baseline; }
.hero h1 { max-width: 11ch; font-size: clamp(2.7rem, 6.2vw, 6.4rem); }
.hero__actions { display: flex; flex-wrap: wrap; gap: clamp(1.2rem, 3vw, 2.6rem); align-items: baseline; }

/* --- the property line, set along the bottom of the picture -------------- */
.hero__data {
  position: absolute; right: var(--gut); bottom: clamp(1.4rem, 3vh, 2.4rem); z-index: 3;
  display: flex; gap: clamp(1rem, 2.4vw, 2.4rem); align-items: baseline;
  color: var(--warm-white);
  text-shadow: 0 1px 20px rgba(23,32,42,.8);
}
/* .label paints itself in the secondary ink, which is the wrong ink over a
   photograph — the property line inherits the frame's colour instead */
.hero__data .label { color: inherit; opacity: .85; }
.hero__data li { display: flex; align-items: baseline; gap: .5em; }
.hero__data b { font-family: var(--serif); font-weight: 400; font-size: 1.35em; letter-spacing: .02em; }

/* --- markers: the house says it can be opened ---------------------------- */
.hero__markers { position: absolute; inset: 0; z-index: 2; }
.marker {
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: 3.4rem; height: 3.4rem;
  color: var(--warm-white);
}
.marker__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--warm-white);
  box-shadow: 0 0 0 1px rgba(23,32,42,.28), 0 0 0 7px rgba(251,249,244,.22), 0 2px 16px rgba(23,32,42,.45);
  transition: transform .6s var(--slow);
}
.marker__dot::after {
  content: ""; position: absolute; inset: 50%; width: 3.2rem; height: 3.2rem; margin: -1.6rem;
  border: 1px solid rgba(251,249,244,.6); border-radius: 50%;
  transform: scale(.42); opacity: 0;
  transition: transform .8s var(--slow), opacity .6s var(--ease);
}
.marker__name {
  position: absolute; top: calc(50% + 1.5rem); left: 50%; transform: translate(-50%, .3rem);
  font-size: .56rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
  white-space: nowrap; opacity: 0;
  text-shadow: 0 1px 12px rgba(23,32,42,.55);
  transition: opacity .5s var(--ease), transform .6s var(--slow);
}
.marker:hover .marker__dot::after,
.marker:focus-visible .marker__dot::after,
.marker.is-on .marker__dot::after { transform: scale(1); opacity: 1; }
.marker:hover .marker__name,
.marker:focus-visible .marker__name,
.marker.is-on .marker__name { opacity: 1; transform: translate(-50%, 0); }

/* the zone a marker belongs to: a drawn rectangle over the architecture, not a
   pin and not a popup — it only says "this part of the house is a room" */
.hero__zones { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.zone {
  position: absolute;
  left: var(--zx); top: var(--zy); width: var(--zw); height: var(--zh);
  border: 1px solid rgba(251,249,244,.85);
  background: rgba(251,249,244,.09);
  opacity: 0; transform: scale(.965);
  transition: opacity .55s var(--ease), transform .8s var(--slow);
}
.zone.is-on { opacity: 1; transform: none; }

.hero__scroll {
  position: absolute; left: 50%; bottom: 0; z-index: 4;
  width: 1px; height: clamp(3rem, 7vh, 5.5rem);
  background: linear-gradient(to bottom, rgba(36,37,34,0), rgba(36,37,34,.5));
}

@media (max-width: 900px) {
  .hero { grid-template-rows: 58svh auto; min-height: 100svh; }
  .hero__photo { position: relative; inset: auto; }
  .hero__photo img { object-position: 50% 50%; }
  .hero__panel {
    position: relative; width: auto; bottom: auto;
    padding: clamp(1.6rem, 6vw, 2.4rem) var(--gut) 3.2rem;
  }
  .hero__panel::before { width: 100%; }
  .hero__markers, .hero__zones { inset: 0 0 auto 0; height: 58svh; }
  .marker { left: var(--xm, var(--x)); }
  .zone { left: var(--zxm, var(--zx)); width: var(--zwm, var(--zw)); }
  .hero__data .label { color: var(--ink-2); opacity: 1; }
  .hero__data {
    position: relative; right: auto; bottom: auto; color: var(--ink); text-shadow: none;
    display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1.4rem;
    padding: 1.4rem var(--gut) 0; margin-top: -2rem;
  }
  .hero__scroll { display: none; }
}