/* Home: three original oil-painted PNG layers with scroll-driven depth. */
header.tea-hero {
  position: relative;
  display: block;
  isolation: isolate;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  max-width: none;
  margin: 0 auto;
  padding: 96px 24px 100px;
  overflow: hidden;
  background: #f3f3eb;
  box-shadow: none;
  color: #303b2a;
  text-align: center;
}
.tea-hero .tea-hero-content { position: relative; z-index: 2; }
.tea-hero h1 {
  margin: 0;
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(36px, 3.2vw, 44px);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: .17em;
  text-indent: .17em;
}
.tea-hero-en {
  margin: 16px 0 0;
  font-family: Georgia, serif;
  font-size: 16px;
  font-style: italic;
  letter-spacing: .06em;
  color: #687158;
}
.tea-hero-description {
  margin: 26px 0 0;
  font-family: 'Noto Serif JP', serif;
  font-size: 13px;
  line-height: 2.2;
  letter-spacing: .16em;
}
.tea-hero-booking { display: flex; flex-direction: column; align-items: center; margin-top: 26px; }
.tea-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: 100%;
  box-sizing: border-box;
  padding: 16px 24px;
  border: 1px solid #536343;
  color: #f8f8ef;
  background: #46573a;
  font-size: 12px;
  letter-spacing: .12em;
  text-decoration: none;
  transition: background .2s;
}
.tea-hero-cta:hover { background: #303e27; }
.tea-hero-cta:focus-visible { outline: 2px solid #46573a; outline-offset: 5px; }
.tea-hero-cta span { font-size: 20px; }
header.tea-hero > .tea-hero-scene {
  position: absolute;
  z-index: 0;
  inset: auto 0 0;
  height: 420px;
  pointer-events: none;
  overflow: hidden;
  mask-image: linear-gradient(transparent, #000 22%);
  -webkit-mask-image: linear-gradient(transparent, #000 22%);
}
.tea-layer {
  position: absolute;
  display: block;
  max-width: none;
  transform: translate3d(0, var(--layer-y, 0px), 0);
  will-change: transform;
}
.tea-layer-mountains { width: 112%; height: 100%; left: -6%; bottom: 0; object-fit: cover; object-position: center bottom; }
.tea-layer-terraces { width: 110%; height: 88%; left: -5%; bottom: -12%; object-fit: fill; }
header.tea-hero > .tea-hero-foliage {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.tea-hero-foliage .tea-layer-leaves { width: 108%; height: auto; left: -4%; bottom: -160px; }
@media (prefers-reduced-motion: reduce) {
  .tea-layer { transform: none !important; will-change: auto; }
}
.tea-hero-booking .nw-card { width: min(440px, 100%); box-sizing: border-box; background: rgba(250,250,242,.95); border-color: #c8cdbb; box-shadow: none; }
body:has(.tea-hero) .site-header { background: rgba(243,243,235,.96); border-bottom: 1px solid #dce0d2; }
body:has(.tea-hero) .sh-cta { color: #46573a; border-color: #687658; }
body:has(.tea-hero) .sh-cta:hover { color: white; }
/* Keep the painted strokes proportional at desktop sizes. */
@media (min-width: 601px) {
  .tea-layer-terraces { height: auto; bottom: calc(120px - 44vw); }
}
@media (max-width: 600px) {
  header.tea-hero { min-height: 0; padding: 90px 20px 100px; }
  .tea-hero h1 { font-size: clamp(30px, 8.5vw, 40px); line-height: 1.75; letter-spacing: .12em; }
  .tea-hero-en { font-size: 14px; margin-top: 12px; }
  .tea-hero-description { font-size: 12px; margin-top: 23px; }
  .tea-hero-booking { margin-top: 23px; }
  .tea-hero-cta { padding: 14px 18px; gap: 20px; font-size: 11px; }
  .tea-hero-booking .nw-card { grid-template-columns: 68px 1fr; padding: 12px; gap: 12px; }
  .tea-hero-booking .nw-thumb { width: 68px; }
}

@media (max-width: 600px) {
  header.tea-hero > .tea-hero-scene { height: 390px; }
  .tea-layer-mountains { width: 170%; left: -35%; }
  .tea-layer-terraces { width: 180%; left: -40%; height: 80%; bottom: -4%; }
  .tea-hero-foliage .tea-layer-leaves { width: 150%; left: -25%; bottom: 40px; }
}

/* Reuse the transparent PNG as two independently positioned halves. */
.tea-hero-foliage .tea-leaves-left {
  clip-path: inset(0 50% 0 0);
  left: calc(-4% - 72px);
  bottom: -208px;
}
.tea-hero-foliage .tea-leaves-right { clip-path: inset(0 0 0 50%); }
@media (max-width: 600px) {
  .tea-hero-foliage .tea-leaves-left { left: calc(-25% - 44px); bottom: 4px; }
}

@media (min-width: 601px) {
  /* Fill the screen while keeping foreground branches at their approved scale. */
  .tea-hero-foliage .tea-layer-leaves { width: min(108%, 1210px); }
  .tea-hero-foliage .tea-leaves-right { left: auto; right: -4%; }
}