/* ==========================================================================
   Hobbre — hero
   Copy + neighbourhood feed on top; on large screens the hero pins while the
   street rises and every feed card flies to its own house (see main.js).
   ========================================================================== */

.hv-title {
  font-size: clamp(56px, 10vw, 160px);
  line-height: .8;
}
.hv-title > span { display: block; }

/* ---------- Copy + feed layout ---------- */

.hv4__grid {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 4vw, 72px);
  align-items: center;
}
.hv4__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.hv4 .hv-title { font-size: clamp(56px, 8.2vw, 134px); }
.hv4 .hero__lede { max-width: 32ch; }

/* ---------- Neighbourhood feed ---------- */

.hv4 {
  background: var(--paper);
  padding-block: clamp(32px, 5vw, 80px) clamp(56px, 7vw, 104px);
}
.hv4__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hv4__feed {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  max-width: 620px;
  justify-self: center;
}
.hv4__ribbon {
  position: absolute;
  z-index: -1;
  width: 118%;
  max-width: none;
  left: -12%;
  top: 22%;
  transform: translate3d(0, var(--py, 0px), 0) rotate(-6deg);
  pointer-events: none;
}
.hv4__head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.hv4__head p { font-size: 13px; font-weight: 700; }
.lcard {
  display: flex;
  flex-direction: column;
  border: var(--line);
  border-radius: 22px;
  background: var(--paper);
  overflow: hidden;
  transform: rotate(var(--r, 0deg)) translateY(var(--ty, 0px));
  transition: transform .35s cubic-bezier(.3,1.5,.5,1);
}
.lcard:hover { transform: rotate(0deg) translateY(calc(var(--ty, 0px) - 6px)); }
.lcard--mid { --ty: 26px; }
.lcard__media {
  aspect-ratio: 1 / .8;
  display: grid;
  place-items: center;
  background: var(--bg, var(--mist));
  border-bottom: var(--line);
}
.lcard__media img {
  width: 72%;
  max-height: 86%;
  object-fit: contain;
  transform: rotate(-6deg);
}
.lcard__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 12px;
}
.lcard h3 {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.lcard__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.lcard__type {
  padding: 3px 8px;
  border: var(--line);
  border-radius: var(--r-pill);
  background: var(--mist);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lcard--more {
  background: var(--ink);
  color: var(--paper);
  justify-content: space-between;
  padding: 16px 14px;
}
.lcard--more img { width: 58%; transform: rotate(10deg); align-self: flex-end; }
.lcard--more strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: "wdth" 75, "opsz" 96;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: .85;
  text-transform: uppercase;
}

/* ---------- Stacking ---------- */

@media (max-width: 900px) {
  .hv4__grid { grid-template-columns: 1fr; }
  .hv4__feed { max-width: 520px; }
}
@media (max-width: 720px) {
  .hv4 { padding-top: 96px; }
  .hv4 .hv-title { font-size: 20vw; }
  .hv4__feed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lcard--mid { --ty: 0px; }
  .lcard:nth-of-type(even) { --ty: 18px; }
}

/* ---------- Street scene ---------- */

.hv4.hv7 { padding-block: 0; }

.scene { position: relative; }
.scene__sticky {
  position: relative;
  overflow: clip;
  background: color-mix(in srgb, var(--sky) calc(var(--sky-mix, 1) * 100%), var(--paper));
}
.scene__cloud {
  position: absolute;
  z-index: 1;
  max-width: none;
  pointer-events: none;
  opacity: var(--sky-mix, 1);
}
.scene__cloud--a {
  width: min(19vw, 270px);
  top: 17%;
  left: 5%;
  transform: translateX(calc(var(--drift, .5) * -12vw)) rotate(-16deg);
}
.scene__cloud--b {
  width: min(13vw, 190px);
  top: 27%;
  right: 5%;
  transform: translateX(calc(var(--drift, .5) * 10vw)) rotate(20deg);
}
.scene__caption {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: clamp(92px, 13vh, 136px);
  padding-inline: var(--gutter);
  text-align: center;
  font-size: clamp(44px, 6.2vw, 100px);
  opacity: var(--cap, 1);
  transform: translateY(calc((1 - var(--cap, 1)) * 40px));
}
.scene__ground { position: relative; z-index: 2; }
.street {
  --street-w: min(94vw, 1320px, calc(54vh * 3.033));
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: var(--street-w);
  margin-inline: auto;
  transform: translate3d(var(--pan, 0px), 0, 0);
}
.house {
  position: relative;
  flex: none;
  width: var(--hw);
  margin: 0;
}
.house img {
  display: block;
  width: 100%;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}
.house__tag {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: calc(100% + 10px);
  padding: 7px 12px;
  border: var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%) scale(var(--tag, 1));
  transform-origin: 50% 100%;
}
.house:nth-child(odd) .house__tag { background: var(--sun); }
.scene__pavement {
  position: relative;
  height: clamp(28px, 4.5vh, 52px);
  background: var(--peach);
  border-top: var(--line);
}

/* Static flow by default; main.js adds .is-pinned on large screens */
.hv7 .scene__sticky { background: var(--paper); }
.hv7__layer {
  position: relative;
  z-index: 4;
  padding-block: clamp(32px, 5vw, 80px) clamp(40px, 5vw, 72px);
}
.hv7 .scene__caption,
.hv7 .scene__cloud { display: none; }
.hv7 .scene__ground { background: var(--sky); padding-top: 72px; }
.hv7 .lcard { transition: none; }
.hv7__copy {
  opacity: var(--copy-o, 1);
  transform: translateY(var(--copy-y, 0px));
}
.hv7__copy.is-gone { visibility: hidden; }

.hv7__scene.is-pinned { height: 290vh; }
.hv7__scene.is-pinned .scene__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: color-mix(in srgb, var(--sky) calc(var(--sky-mix, 0) * 100%), var(--paper));
}
.hv7__scene.is-pinned .scene__caption,
.hv7__scene.is-pinned .scene__cloud { display: block; }
/* The layer centres the feed in the part of the screen that is visible on
   load: --lead is how far the hero starts below the top (ticker + nav). */
.hv7__scene.is-pinned .hv7__layer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: safe center;
  padding-top: clamp(84px, 10vh, 112px);
  padding-bottom: calc(var(--lead, 0px) + 72px);
  pointer-events: none;
}
.hv7__scene.is-pinned .street { --street-w: min(94vw, 1760px, calc(50vh * 3.033)); }
.scene__cue,
.hv7__scene.is-pinned.no-cue .scene__cue { display: none; }
.hv7__scene.is-pinned .scene__cue {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: calc(var(--lead, 0px) + 20px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.032em;
  text-transform: uppercase;
  opacity: var(--cue, 1);
  transform: translateX(-50%);
  pointer-events: none;
}
.scene__cue svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: cue-bounce 1.6s ease-in-out infinite;
}
@keyframes cue-bounce {
  0%, 100% { transform: translateY(-2px); }
  50%      { transform: translateY(3px); }
}
.hv7__scene.is-pinned .hv4__grid { pointer-events: auto; }
.hv7__scene.is-pinned .hv4__feed { max-width: 580px; }
.hv7__scene.is-pinned .scene__ground {
  background: none;
  padding-top: 0;
  transform: translate3d(0, var(--rise, 0%), 0);
}
.hv7__scene.is-pinned .lcard {
  position: relative;
  z-index: 5;
  transform-origin: 0 0;
  will-change: transform;
}

@media (max-width: 720px) {
  .street { --street-w: 250vw; }
  .house__tag { font-size: 11px; padding: 6px 10px; }
  .scene__caption { top: 96px; }
  .hv7 .scene__ground { padding-top: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .street { --street-w: min(94vw, 1320px); }
}