@charset "UTF-8";
/* ============================================================
   Manor Path Field — Shared Design System
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Shippori+Mincho:wght@400;500;600;800&family=Zen+Kaku+Gothic+New:wght@300;400;500;700&display=swap');

:root{
  --mp-green: #2c3a2e;
  --mp-green-soft: #4a5d43;
  --mp-beige: #ece5d6;
  --mp-stone: #918b7d;
  --mp-cedar: #6d4a34;
  --mp-cream: #faf7ef;
  --mp-ink: #26241f;
  --mp-line: rgba(44,58,46,0.14);
}

html{scroll-behavior:smooth;}

body{
  font-family:'Zen Kaku Gothic New','Shippori Mincho',serif;
  background:var(--mp-cream);
  color:var(--mp-ink);
  overflow-x:hidden;
}

.font-display{font-family:'Fraunces','Shippori Mincho',serif;}
.font-jp{font-family:'Shippori Mincho',serif;}

/* ---------- Sticky Nav ---------- */
#site-nav{
  transition:background-color .5s ease, box-shadow .5s ease, padding .4s ease;
  background:rgba(250,247,239,0.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
#site-nav.scrolled{
  background:rgba(250,247,239,0.94);
  box-shadow:0 8px 30px rgba(44,58,46,0.08);
}
#site-nav a.nav-link{
  position:relative;
  letter-spacing:.04em;
}
#site-nav a.nav-link::after{
  content:"";
  position:absolute;
  left:0; bottom:-6px;
  width:0%; height:1px;
  background:var(--mp-green);
  transition:width .45s cubic-bezier(.22,1,.36,1);
}
#site-nav a.nav-link:hover::after,
#site-nav a.nav-link.active::after{width:100%;}

/* mobile menu */
#mobile-menu{
  max-height:0;
  overflow:hidden;
  transition:max-height .5s ease;
}
#mobile-menu.open{max-height:900px;}

/* ---------- Logo ---------- */
.mp-logo-mark{display:inline-flex;align-items:center;gap:.6rem;}
.mp-logo-mark svg{display:block;}

/* ---------- Buttons ---------- */
.btn-leaf{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.9rem 2rem;
  border-radius:999px;
  font-family:'Fraunces',serif;
  letter-spacing:.03em;
  font-size:.92rem;
  transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-color .4s ease, color .4s ease;
  overflow:hidden;
}
.btn-leaf.primary{
  background:var(--mp-green);
  color:var(--mp-cream);
  box-shadow:0 8px 24px rgba(44,58,46,0.25);
}
.btn-leaf.primary:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(44,58,46,0.32);
  background:var(--mp-green-soft);
}
.btn-leaf.ghost{
  background:transparent;
  color:var(--mp-green);
  border:1px solid var(--mp-green);
}
.btn-leaf.ghost:hover{
  background:var(--mp-green);
  color:var(--mp-cream);
  transform:translateY(-3px);
}
.btn-leaf .leaf-ico{transition:transform .5s ease;}
.btn-leaf:hover .leaf-ico{transform:rotate(18deg) translateX(2px);}

/* ---------- Editorial Cards ---------- */
.mp-card{
  position:relative;
  overflow:hidden;
  border-radius:6px;
  background:#fff;
  transition:transform .6s cubic-bezier(.22,1,.36,1), box-shadow .6s ease;
}
.mp-card:hover{transform:translateY(-6px);}
.mp-card img{
  transition:transform 1.1s cubic-bezier(.22,1,.36,1), filter .8s ease;
  will-change:transform;
}
.mp-card:hover img{transform:scale(1.08);}
.mp-card .mp-card-tag{
  letter-spacing:.14em;
  font-size:.68rem;
}

/* ---------- Fade in on scroll ---------- */
.reveal{opacity:0; transform:translateY(36px); transition:opacity 1s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1);}
.reveal.in-view{opacity:1; transform:translateY(0);}
.reveal-delay-1.in-view{transition-delay:.12s;}
.reveal-delay-2.in-view{transition-delay:.24s;}
.reveal-delay-3.in-view{transition-delay:.36s;}

/* ---------- Hero parallax layers ---------- */
.hero-wrap{position:relative; overflow:hidden;}
.hero-layer{
  position:absolute; inset:-6% -2%;
  background-size:cover;
  background-position:center;
  will-change:transform;
}
.hero-gradient{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,24,16,.28) 0%, rgba(20,24,16,.12) 35%, rgba(20,24,16,.55) 100%);
}

/* grass sway silhouette */
.grass-strip{
  position:absolute; left:0; right:0; bottom:-2px; height:64px;
  background:linear-gradient(180deg, transparent, rgba(44,58,46,.85) 80%);
  pointer-events:none;
}
.grass-blade{
  position:absolute; bottom:0; width:2px; height:40px;
  background:rgba(236,229,214,.5);
  transform-origin:bottom center;
  animation:sway 3.6s ease-in-out infinite;
  border-radius:2px 2px 0 0;
}
@keyframes sway{
  0%,100%{transform:rotate(-4deg);}
  50%{transform:rotate(5deg);}
}

/* floating leaves */
#leaf-field{position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:5;}
.leaf{
  position:absolute; top:-40px; opacity:.85;
  animation-name:leafFall;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
@keyframes leafFall{
  0%{transform:translate(0,0) rotate(0deg); opacity:0;}
  8%{opacity:.9;}
  92%{opacity:.8;}
  100%{transform:translate(var(--drift,60px), 620px) rotate(340deg); opacity:0;}
}

/* ---------- Masonry gallery ---------- */
.masonry{
  column-count:1; column-gap:1rem;
}
@media(min-width:640px){.masonry{column-count:2;}}
@media(min-width:1024px){.masonry{column-count:3;}}
.masonry figure{
  break-inside:avoid;
  margin:0 0 1rem;
  position:relative;
  overflow:hidden;
  border-radius:6px;
  cursor:zoom-in;
}
.masonry figure img{width:100%; display:block; transition:transform 1s cubic-bezier(.22,1,.36,1);}
.masonry figure:hover img{transform:scale(1.06);}
.masonry figure figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:1rem .9rem .8rem;
  background:linear-gradient(0deg, rgba(20,24,16,.75), transparent);
  color:#faf7ef;
  font-size:.78rem;
  letter-spacing:.05em;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .5s ease, transform .5s ease;
}
.masonry figure:hover figcaption{opacity:1; transform:translateY(0);}

/* lightbox */
#lightbox{
  position:fixed; inset:0; background:rgba(18,20,15,.92);
  display:none; align-items:center; justify-content:center;
  z-index:100; padding:2rem;
}
#lightbox.open{display:flex;}
#lightbox img{max-width:92vw; max-height:84vh; border-radius:4px; box-shadow:0 30px 80px rgba(0,0,0,.5);}
#lightbox .lb-cap{color:#ece5d6; font-family:'Shippori Mincho',serif; margin-top:1rem; letter-spacing:.05em; text-align:center;}
#lightbox .lb-close{position:absolute; top:1.5rem; right:1.8rem; color:#faf7ef; font-size:2rem; cursor:pointer; line-height:1;}

/* ---------- Toast ---------- */
#toast-stack{position:fixed; bottom:1.5rem; right:1.5rem; z-index:200; display:flex; flex-direction:column; gap:.7rem; align-items:flex-end;}
.toast{
  background:var(--mp-green);
  color:var(--mp-cream);
  padding:.9rem 1.3rem;
  border-radius:8px;
  box-shadow:0 14px 34px rgba(20,24,16,.3);
  font-size:.88rem;
  letter-spacing:.02em;
  display:flex; align-items:center; gap:.6rem;
  transform:translateX(30px); opacity:0;
  transition:transform .5s cubic-bezier(.22,1,.36,1), opacity .5s ease;
  max-width:320px;
}
.toast.show{transform:translateX(0); opacity:1;}

/* ---------- FAQ accordion ---------- */
.faq-item{border-bottom:1px solid var(--mp-line);}
.faq-q{cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem;}
.faq-q .faq-plus{transition:transform .4s ease; flex:none;}
.faq-item.open .faq-plus{transform:rotate(45deg);}
.faq-a{display:none; padding-bottom:1.4rem;}

/* ---------- misc ---------- */
.divider-leaf{width:1px; height:34px; background:var(--mp-green); opacity:.4;}
.bg-noise{
  background-image:radial-gradient(rgba(44,58,46,.05) 1px, transparent 1px);
  background-size:14px 14px;
}
.stagger > *{opacity:0; transform:translateY(24px); animation:staggerUp .9s cubic-bezier(.22,1,.36,1) forwards;}
.stagger > *:nth-child(1){animation-delay:.05s;}
.stagger > *:nth-child(2){animation-delay:.15s;}
.stagger > *:nth-child(3){animation-delay:.25s;}
.stagger > *:nth-child(4){animation-delay:.35s;}
@keyframes staggerUp{to{opacity:1; transform:translateY(0);}}

::selection{background:var(--mp-green); color:var(--mp-cream);}

/* scrollbar */
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--mp-beige);}
::-webkit-scrollbar-thumb{background:var(--mp-stone); border-radius:8px;}

/* loader */
#page-loader{position:fixed; inset:0; background:var(--mp-cream); z-index:999; display:flex; align-items:center; justify-content:center; transition:opacity .6s ease, visibility .6s ease;}
#page-loader.hide{opacity:0; visibility:hidden;}