/* Home J1 adopts Home E1.1. Keep its image, copy and visual treatment together
   while the owner reviews supporting-copy alternatives. */
body[data-page="home"] .site-header {
  position: absolute;
  inset: 0 0 auto;
  min-height: 88px;
  padding: 0 clamp(24px, 4vw, 68px);
  border: 0;
  background: transparent;
  color: #f8f4ec;
}
body[data-page="home"] .brand { width: 142px; flex-basis: 142px; }
body[data-page="home"] .brand img { width: 142px; height: 58px; object-position: left center; }
body[data-page="home"] .desktop-nav a {
  color: rgb(248 244 236 / 84%);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}
body[data-page="home"] .header-actions > .button {
  padding: 12px 0;
  border: 0;
  background: transparent;
  color: #f8f4ec;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}
body[data-page="home"] .header-actions > .button span { color: #c7af8c; }
body[data-page="home"] .mobile-nav { color: var(--ink); }
.hero-e {
  position: relative;
  min-height: 100svh;
  padding: 0;
  overflow: hidden;
  color: #f8f4ec;
  background: #272925;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.hero-e-media, .hero-e-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-e-media img { animation: heroEDrift 18s ease-out both; }
@keyframes heroEDrift { from { transform: scale(1.035); } to { transform: scale(1); } }
.hero-e-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(27,30,26,.7) 0%, rgba(27,30,26,.37) 42%, rgba(27,30,26,.04) 72%), linear-gradient(0deg, rgba(30,31,28,.52) 0%, transparent 38%);
}
/* Protect the light navigation when a wider crop puts it over the garden. */
.hero-e-shade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(27,30,26,.5), transparent 160px);
}
.hero-e-arch {
  position: absolute;
  z-index: 2;
  top: 0;
  right: -3vw;
  width: min(51vw, 760px);
  height: 82%;
  border: 1px solid rgb(199 175 140 / 72%);
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 38% 38% 0 0;
  opacity: .64;
  transform: translateY(-14%);
}
.hero-e-arch::before, .hero-e-arch::after {
  position: absolute;
  right: 12%;
  bottom: 0;
  left: 12%;
  height: 72%;
  border: 1px solid rgb(199 175 140 / 55%);
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 38% 38% 0 0;
  content: "";
}
.hero-e-arch::after { right: 26%; left: 26%; height: 54%; }
.hero-e-content {
  position: relative;
  z-index: 3;
  display: grid;
  width: min(1440px, calc(100vw - 80px));
  min-height: 100svh;
  align-content: end;
  margin-inline: auto;
  padding: 168px 0 clamp(82px, 9vw, 126px);
}
.hero-e-copy { max-width: 760px; }
.hero-e .eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 28px;
  color: #c7af8c;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  line-height: 1.4;
}
.hero-e .eyebrow::before { width: 26px; height: 1px; background: currentColor; content: ""; flex-shrink: 0; }
.hero-e h1 {
  margin: 0 0 28px;
  color: #f8f4ec;
  font-size: clamp(62px, 8.2vw, 132px);
  font-weight: 400;
  line-height: .79;
  letter-spacing: -.035em;
  text-wrap: wrap;
  text-shadow: 0 4px 30px rgba(20,20,18,.16);
}
.hero-e h1 em { color: #c7af8c; font-weight: 400; letter-spacing: inherit; }
.hero-e .lede {
  max-width: 610px;
  margin: 0 0 36px;
  color: rgb(248 244 236 / 88%);
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.65;
}
.hero-e-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; }
.hero-e .button {
  min-height: 58px;
  justify-content: center;
  padding: 16px 26px;
  border: 1px solid #b2956c;
  border-radius: 999px;
  color: #272925;
  background: #b2956c;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .13em;
  line-height: 1.2;
  text-transform: uppercase;
}
.hero-e .button:hover { color: #f8f4ec; background: #552c18; border-color: #552c18; }
.hero-e .text-link {
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgb(248 244 236 / 42%);
  color: #f8f4ec;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  line-height: normal;
}
.hero-e .text-link span { font-family: var(--sans); font-size: 15px; }
.hero-e-index {
  position: absolute;
  z-index: 3;
  right: clamp(26px, 4vw, 66px);
  bottom: 42px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgb(248 244 236 / 72%);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hero-e-index i { width: 52px; height: 1px; background: #c7af8c; }
#home-hero > .frame-reference, #home-hero > .frame-heart { top: 104px; }
@media (max-width: 820px) {
  body[data-page="home"] .site-header { min-height: 74px; padding-inline: 18px; }
  body[data-page="home"] .brand { width: 118px; flex-basis: 118px; }
  body[data-page="home"] .brand img { width: 118px; height: 50px; }
  .hero-e, .hero-e-content { min-height: 100svh; }
  .hero-e-media img { object-position: 67% center; }
  .hero-e-shade { background: linear-gradient(180deg, rgba(24,27,23,.04) 20%, rgba(24,27,23,.2) 100%); }
  .hero-e-arch { right: -26vw; width: 90vw; height: 62%; }
  .hero-e-content { width: calc(100% - 36px); padding-top: 154px; padding-bottom: 90px; }
  .hero-e-copy { position: relative; isolation: isolate; max-width: 100%; }
  /* Tie the scrim to the copy, not a percentage of the photograph: on a
     shorter phone the text starts much higher. Feather its edge into the
     image and let it run to the bottom, without a visible text panel. */
  .hero-e-copy::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -70px -18px -90px;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(24,27,23,.68) 58px, rgba(24,27,23,.7) 100%);
  }
  .hero-e .eyebrow { color: #ead8be; }
  .hero-e h1 { font-size: clamp(56px, 17vw, 88px); line-height: .84; }
  .hero-e .lede { font-size: 17px; color: #f8f4ec; }
  .hero-e-actions { align-items: flex-start; flex-direction: column; }
  .hero-e-index { display: none; }
  #home-hero > .frame-reference, #home-hero > .frame-heart { top: 88px; }
}
@media (max-width: 540px) { .hero-e .button { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .hero-e-media img { animation: none; } }