/* Measured from the reference: full-width portrait, 60vh spacing, floral scene. */
:root { --ink: #000; --reading: #1b1e1b; }
.hero.hero-reference {
  position: relative;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow-x: clip;
  overflow-y: visible;
  background: #000;
  isolation: isolate;
}
.hero-reference .hero-stage { position: relative; top: auto; height: auto; min-height: 0; max-height: none; }
.hero-reference .hero-picture { position: absolute; inset: 0 0 auto; display: block; width: 100%; height: 100vh; overflow: hidden; z-index: 0; }
.hero-reference .hero-portrait {
  position: absolute;
  inset: 0;
  width: 108%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 70%;
  transform: none;
  filter: brightness(.88) saturate(.82);
  animation: dhau-photo-enter 1.25s cubic-bezier(.16,1,.3,1) both;
}
.hero-reference .hero-shade {
  position: absolute;
  inset: 0 0 auto;
  height: 100vh;
  z-index: 0;
  background: linear-gradient(180deg,transparent 40%,#00000040 66%,#000000bf 88%,#000 100%);
}
.hero-reference .hero-spacing { position: relative; height: 60vh; pointer-events: none; }
.hero-reference .hero-scene { position: relative; display: flex; flex-direction: column; align-items: center; gap: 30px; padding-bottom: 96px; }
.hero-reference .hero-flower-back, .hero-reference .hero-flower-front {
  position: absolute;
  top: 0;
  bottom: auto;
  left: 50%;
  width: 110%;
  max-width: none;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center top;
  opacity: 1;
  mask-image: linear-gradient(180deg, #000 0%, #000 min(60%, calc(var(--hero-scene-height, 800px) - 100px)), transparent min(100%, calc(var(--hero-scene-height, 800px) + 120px)));
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 min(60%, calc(var(--hero-scene-height, 800px) - 100px)), transparent min(100%, calc(var(--hero-scene-height, 800px) + 120px)));
  filter: none;
  pointer-events: none;
  transform-origin: center;
}
.hero-reference .hero-flower-back { z-index: 1; mix-blend-mode: normal; transform: translate(-50%,var(--hero-flower-back-y,0px)); }
.hero-reference .hero-flower-front { z-index: 2; mix-blend-mode: normal; transform: translate(-50%,var(--hero-flowers-y,0px)); }
.hero-reference .hero-shape { position: absolute; width: 118%; height: calc(var(--hero-scene-height, 800px) + 120px); aspect-ratio: auto; left: 50%; top: 0; transform: translateX(-50%); z-index: 3; background: linear-gradient(180deg, transparent 35%, #0003 58%, #000b 82%, #000 100%); pointer-events: none; }
.hero-reference .hero-content { position: relative; inset: auto; width: 66%; z-index: 4; text-align: center; transform: none; }
.hero-reference .hero-title {
  display: block;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(150px,15vw,310px);
  line-height: .92;
  letter-spacing: .025em;
  color: #fff;
  filter: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.hero-reference .hero-title span { display: block; width: fit-content; margin-inline: auto; font-size: 1em; line-height: .92; transform: scaleX(1.3); }
.hero-reference .hero-title span + span { margin-top: .045em; padding-bottom: .16em; font-size: 1.08em; line-height: 1; transform: scaleX(1.35); color: #fff; background: none; -webkit-text-fill-color: currentColor; }
.hero-reference .hero-caption {
  position: relative;
  inset: auto;
  width: 100%;
  margin: 8px 0 0;
  padding-inline: 30px;
  display: block;
  text-align: center;
  transform: none;
  z-index: 5;
  opacity: 1;
}
.hero-reference .hero-caption > p { max-width: 1050px; margin-inline: auto; font-size: 48px; line-height: 1.28; letter-spacing: -.025em; text-shadow: none; text-wrap: balance; }
html.js-motion .hero-reference [data-hero-enter].hero-enter { opacity: 0; transform: translateY(80px); transition: opacity 1.1s .4s cubic-bezier(.16,1,.3,1),transform 1.3s .4s cubic-bezier(.16,1,.3,1); }
html.js-motion .hero-reference [data-hero-enter].is-visible { opacity: 1; transform: translateY(0); }
@keyframes dhau-photo-enter { from { opacity: .001; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@media (min-width:1440px) {
  .has-hero .site-header { width: 90%; max-width: none; height: 180px; }
  .has-hero .brand-portrait { width: 76px; height: 85px; flex-basis: 76px; }
  .has-hero .brand-type { font-size: 40px; max-width: 130px; }
  .has-hero .desktop-nav { font-size: 18px; }
  .has-hero .header-explore { font-size: 15px; min-height: 62px; }
}
@media (max-width:1439px) and (min-width:810px) {
  .hero-reference .hero-content { width: 100%; }
  .hero-reference .hero-title { font-size: 20vw; }
  .hero-reference .hero-caption > p { max-width: 850px; font-size: 38px; }
  .hero-reference .hero-scene { padding-bottom: 88px; }
  .hero-reference .hero-shape { top: 0; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .hero-reference .hero-portrait { width: 100%; object-position: 57% 70%; }
}
@media (min-width: 810px) and (max-width: 1199px) and (orientation: portrait) {
  .hero-reference .hero-portrait {
    height: auto;
    object-fit: contain;
    object-position: 50% top;
    mask-image: linear-gradient(180deg, #000 75%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 75%, transparent 100%);
  }
  .hero-reference .hero-shade { background: linear-gradient(180deg, #0007 0%, transparent 28%, #0002 50%, #000b 80%, #000 100%); }
}
@media (max-width:809px) {
  .hero-reference .hero-picture, .hero-reference .hero-shade { inset: 0 0 auto; width: 100%; height: 60vh; }
  .hero-reference .hero-portrait { width: 100%; object-fit: cover; object-position: 50% 32%; filter: brightness(.88) saturate(.85); }
  .hero-reference .hero-spacing { height: 40vh; }
  .hero-reference .hero-scene { gap: 24px; padding-bottom: 64px; }
  .hero-reference .hero-content { width: 100%; }
  .hero-reference .hero-title { display: block; font-size: clamp(110px,31vw,225px); line-height: .97; letter-spacing: .02em; }
  .hero-reference .hero-title span { line-height: .97; transform: scaleX(1.07); }
  .hero-reference .hero-title span + span { margin-top: .07em; font-size: 1.08em; line-height: 1.03; transform: scaleX(1.08); }
  .hero-reference .hero-flower-back, .hero-reference .hero-flower-front {
    left: 50%; top: 0; bottom: auto; width: 175%; max-width: none; height: auto; aspect-ratio: 1.25;
    mask-image: linear-gradient(180deg, #000 0%, #000 min(70%, calc(var(--hero-scene-height, 480px) - 40px)), transparent min(100%, calc(var(--hero-scene-height, 480px) + 100px)));
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 min(70%, calc(var(--hero-scene-height, 480px) - 40px)), transparent min(100%, calc(var(--hero-scene-height, 480px) + 100px)));
  }
  .hero-reference .hero-shape { top: 0; width: 175%; aspect-ratio: auto; background: linear-gradient(180deg,transparent 35%,#0003 75%,#000 100%); }
  .hero-reference .hero-caption { inset: auto; width: 100%; padding-inline: 24px; }
  .hero-reference .hero-caption > p { max-width: 560px; font-size: clamp(25px,7.1vw,35px); line-height: 1.35; }
}
@media (min-width: 600px) and (max-width: 809px) and (orientation: portrait) {
  .hero-reference .hero-picture, .hero-reference .hero-shade { height: 100vh; }
  .hero-reference .hero-portrait {
    height: auto;
    object-fit: contain;
    object-position: 50% top;
    mask-image: linear-gradient(180deg, #000 75%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 75%, transparent 100%);
  }
  .hero-reference .hero-spacing { height: 55vh; }
  .hero-reference .hero-shade { background: linear-gradient(180deg, #0007 0%, transparent 28%, #0002 50%, #000b 80%, #000 100%); }
}
@media (prefers-reduced-motion:reduce) {
  .hero-reference .hero-portrait { animation: none; transform: none; opacity: 1; }
  html.js-motion .hero-reference [data-hero-enter].hero-enter { opacity: 1; transform: none; transition: none; }
  .hero-reference .hero-flower-back, .hero-reference .hero-flower-front { transform: translateX(-50%); }
}