/* Hero — supplied reference composition rebuilt as responsive HTML/CSS */
.hero {
  --hero-cream: #F1EDE4;
  --hero-rule: rgba(88, 75, 58, .14);
  --hero-ink: #584B3A;
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100svh;
  min-height: 660px;
  overflow: hidden;
  overflow: clip;
  color: var(--hero-ink);
  background: transparent;
}

.hero__grid {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__grid-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hero__grid-rule,
.hero__grid-accent {
  fill: none;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
}

.hero__grid-rule {
  stroke: var(--hero-rule);
  stroke-width: 1;
}

.hero__grid-accent {
  stroke: rgba(62, 113, 80, .86);
  stroke-width: 7;
}

.hero__grid-mobile {
  display: none;
}

.hero__grid-desktop {
  display: block;
}

.hero__forest-window {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 30.3%;
  width: 4.2%;
  height: 19.25%;
  overflow: hidden;
  background: var(--forest);
  pointer-events: none;
}

.hero__forest-window picture,
.hero__forest-window img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__forest-window img {
  object-fit: cover;
  object-position: 50% 50%;
  filter: saturate(.74) contrast(.92) brightness(.78);
}

.hero__head {
  position: absolute;
  z-index: 5;
  top: 3.7%;
  left: 4.85%;
  right: 4%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
}

.hero__logo {
  display: block;
  width: clamp(132px, 9.7vw, 164px);
  height: auto;
  object-fit: contain;
}

.hero__official {
  position: relative;
  margin-top: 2.5%;
  padding: 0 1px 8px;
  border-bottom: 1px solid rgba(88, 75, 58, .42);
  color: var(--hero-ink);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(10px, .74vw, 12px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .2em;
  text-decoration: none;
  pointer-events: auto;
}

.hero__official:focus-visible {
  outline: 1px solid var(--forest);
  outline-offset: 7px;
}

.hero__display {
  position: absolute;
  z-index: 4;
  top: 27.9%;
  left: 4.85%;
  width: 53%;
  margin: 0;
  color: var(--hero-ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(100px, min(11.7vw, 20.7svh), 198px);
  font-weight: 300;
  font-style: normal;
  font-feature-settings: "kern" 1, "liga" 1;
  line-height: .88;
  letter-spacing: -.04em;
  text-align: left;
}

.hero__display-line {
  display: block;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
}

.hero__display-final {
  display: flex;
  gap: .13em;
}

.hero__statement {
  position: absolute;
  z-index: 4;
  top: 54.4%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: clamp(22px, 2vw, 34px);
  width: 42%;
}

.hero__statement-line {
  flex: 0 0 clamp(28px, 2.4vw, 42px);
  height: 1px;
  background: var(--forest);
}

.hero__statement p {
  margin: 0;
  color: var(--hero-ink);
  font-family: var(--serif-jp);
  font-size: clamp(15px, 1.38vw, 23px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .2em;
  white-space: nowrap;
}

.hero__opening {
  position: absolute;
  z-index: 4;
  left: 5.1%;
  bottom: 5.9%;
  color: var(--hero-ink);
  font-family: "Helvetica Neue", Arial, sans-serif;
  text-transform: uppercase;
}

.hero__opening-date,
.hero__opening-name {
  margin: 0;
  line-height: 1.2;
}

.hero__opening-date {
  font-size: clamp(12px, .96vw, 16px);
  letter-spacing: .34em;
  text-transform: none;
}

.hero__opening-rule {
  display: block;
  width: 44px;
  height: 1px;
  margin: 17px 0 18px;
  background: var(--forest);
}

.hero__opening-name {
  font-size: clamp(9px, .72vw, 12px);
  letter-spacing: .27em;
  white-space: nowrap;
}

.hero__scroll {
  position: absolute;
  z-index: 4;
  right: 3.9%;
  bottom: 10.8%;
  color: var(--hero-ink);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(9px, .72vw, 12px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .42em;
}

.hero__scroll::after {
  content: "";
  position: absolute;
  top: 32px;
  left: calc(50% - 1px);
  width: 1px;
  height: calc(10.8svh - 24px);
  background: rgba(62, 113, 80, .72);
  transform-origin: 50% 0;
  animation: heroScrollTrace 3.4s cubic-bezier(.45, 0, .55, 1) infinite;
}

@keyframes heroScrollTrace {
  0%, 100% { transform: scaleY(.42); opacity: .35; }
  50% { transform: scaleY(1); opacity: .8; }
}

@media (max-width: 1100px) and (min-width: 769px) {
  .hero__display { width: 57%; }
  .hero__statement { left: 51%; width: 44%; }
  .hero__statement p { letter-spacing: .14em; }
}

@media (max-width: 768px) {
  .hero {
    height: 100svh;
    min-height: 640px;
  }

  .hero__grid-desktop { display: none; }
  .hero__grid-mobile { display: block; }

  /* Photo strip anchored bottom-left, hanging from the lower grid rule */
  .hero__forest-window {
    top: 58.9%;
    bottom: 0;
    left: 9.3%;
    width: 17%;
    height: auto;
  }

  .hero__head {
    top: 3.4%;
    left: 22px;
    right: 22px;
  }

  .hero__logo { width: clamp(88px, 24vw, 104px); }

  .hero__official {
    margin-top: 10px;
    padding-bottom: 6px;
    font-size: 10px;
    letter-spacing: .2em;
  }

  .hero__display {
    top: 26.6%;
    left: 9.5%;
    width: 86%;
    font-size: clamp(56px, 19.4vw, 88px);
    line-height: .92;
    letter-spacing: -.04em;
  }

  .hero__statement {
    top: 63.5%;
    left: 33.5%;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 58%;
  }

  .hero__statement-line {
    flex: 0 0 auto;
    width: 30px;
    height: 1px;
  }

  .hero__statement p {
    max-width: 10em;
    font-size: clamp(14px, 4.1vw, 17px);
    line-height: 2;
    letter-spacing: .34em;
    white-space: normal;
  }

  .hero__statement-seg { display: inline-block; }

  .hero__opening {
    top: 79%;
    bottom: auto;
    left: 33.5%;
  }

  .hero__opening-date {
    font-size: 13px;
    letter-spacing: .3em;
  }

  .hero__opening-rule {
    width: 40px;
    margin: 13px 0 14px;
  }

  .hero__opening-name {
    font-size: clamp(7px, 2.05vw, 8px);
    letter-spacing: .14em;
  }

  .hero__scroll {
    right: auto;
    left: 50%;
    bottom: 7.3%;
    transform: translateX(-50%);
    font-size: 10px;
    letter-spacing: .4em;
  }

  .hero__scroll::after {
    top: 26px;
    height: max(24px, calc(7.3svh - 18px));
  }
}

@media (max-width: 768px) and (max-height: 700px) {
  .hero__display { top: 24.5%; }
  .hero__statement { top: 61.5%; }
  .hero__opening { top: 77%; }
}

@media (max-height: 720px) and (min-width: 769px) {
  .hero__head { top: 2.5%; }
  .hero__display { top: 25%; }
  .hero__statement { top: 53%; }
  .hero__opening { bottom: 4%; }
  .hero__scroll { bottom: 9%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll::after {
    animation: none;
  }
}