/* =========================================================
   HERO — full-width image banner at the top of a page.
   Pair with <body data-header="overlay"> so the header sits
   transparently on top of the image.

   Recommended image sizes
   • Desktop: 2560 × 1440 px (16:9), JPG/WebP, under ~400 KB.
     Keep the furniture on the right two-thirds; leave calm
     space bottom-left for the headline.
   • Phone (optional, via <picture>): 1200 × 1600 px (3:4),
     furniture centred.
   ========================================================= */

:root {
  --hero-height: 100svh;   /* full screen: the rest of the page starts below the fold */
  --hero-min: 560px;
  --hero-focus: center;    /* object-position of the photo */
}

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  height: calc(var(--hero-height) - var(--announce-h, 0px)); min-height: var(--hero-min);
  color: var(--cream); background: var(--brown-deep);
}

.hero__media, .hero__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.hero__media { z-index: -2; }
.hero__media img { object-fit: cover; object-position: var(--hero-focus); }

/* Shading so cream text stays readable on any photo */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    /* left 30%: soft black fade behind the headline, clear by 30% so the room stays bright */
    linear-gradient(to right, rgba(0, 0, 0, .32) 0%, rgba(0, 0, 0, .16) 15%, rgba(0, 0, 0, 0) 30%),
    linear-gradient(to bottom, rgba(30, 18, 8, .38) 0%, rgba(30, 18, 8, 0) 22%),
    linear-gradient(to top, rgba(30, 18, 8, .55) 0%, rgba(30, 18, 8, .15) 45%, rgba(30, 18, 8, 0) 70%);
}

.hero__content { padding-bottom: clamp(48px, 9vh, 104px); }
.hero__eyebrow { color: rgba(246, 243, 236, .85); }
.hero__title {
  margin-top: var(--s-4);
  font-family: var(--font-display);
  font-size: clamp(24px, 3.2vw, 44px); font-weight: 300; /* was 30–64px */
  letter-spacing: var(--tracking-display); text-transform: uppercase; line-height: 1.2;
}
/* Headline: one set line per .hero__line ("Mindful design" / "Intentional home").
   Very narrow phones (~320px) may still wrap a line rather than overflow. */
.hero__line { display: block; }
@media (min-width: 901px) {
  .hero__line { white-space: nowrap; }
}

/* Down arrow at the bottom centre */
.hero__scroll {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  display: grid; place-items: center; width: 48px; height: 48px;
  color: var(--cream); opacity: .85; transition: opacity var(--dur) var(--ease);
}
.hero__scroll:hover { opacity: 1; }
.hero__scroll svg { width: 26px; height: 26px; animation: hero-bob 2.4s var(--ease) infinite; }
@keyframes hero-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .hero__scroll svg { animation: none; } }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.hero__actions .btn { min-height: 0; padding: 12px 32px; font-size: 13px; } /* roomy padding to match the airy headline */

/* Outline button for dark/photo backgrounds */
/* Ghost button: transparent with a thin light outline; fills on hover */
.btn--outline-light { background: transparent; border-color: rgba(246, 243, 236, .8); color: var(--cream); }
.btn--outline-light:hover { background: var(--cream); color: var(--brown); border-color: var(--cream); }

@media (max-width: 600px) {
  :root { --hero-min: 520px; }
  .hero__content { padding-bottom: 96px; } /* room for the down arrow */
}