/* ==========================================================================
   Juniper Tide — Core Stylesheet
   Premium Japanese coastal minimalism
   ========================================================================== */

:root{
  --c-juniper-900:#22312c;
  --c-juniper-800:#293c35;
  --c-juniper-700:#334a41;
  --c-juniper-600:#3e5c50;
  --c-juniper-500:#4f7864;
  --c-juniper-300:#9bb7a4;
  --c-juniper-200:#c3d3c8;
  --c-juniper-100:#e1e9e3;
  --c-juniper-50:#f3f6f4;
  --c-ocean-700:#2f5569;
  --c-ocean-600:#3a6a82;
  --c-ocean-500:#4f7ba0;
  --c-ocean-300:#8db9cc;
  --c-ocean-100:#dbe9f0;
  --c-sand-600:#b79a63;
  --c-sand-400:#d9c7a3;
  --c-sand-200:#ecdfc3;
  --c-sand-100:#f3ead6;
  --c-ivory:#faf6ee;
  --c-ink:#262622;
  --shadow-soft: 0 18px 50px -20px rgba(34,49,44,0.35);
  --shadow-card: 0 10px 30px -14px rgba(34,49,44,0.28);
}

html{ scroll-behavior:smooth; }

body{
  background-color:var(--c-ivory);
  color:var(--c-ink);
  font-family:'Zen Kaku Gothic New','Shippori Mincho','Noto Sans JP',sans-serif;
  letter-spacing:0.01em;
  overflow-x:hidden;
}

.font-jp-serif{ font-family:'Shippori Mincho','Noto Serif JP',serif; }
.font-display{ font-family:'Cormorant Garamond','Shippori Mincho',serif; }

/* ---------- texture & background helpers ---------- */
.texture-paper{
  background-image:
    radial-gradient(circle at 15% 20%, rgba(62,92,80,0.05), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(79,123,160,0.06), transparent 45%);
}
.wave-divider{
  display:block; width:100%; height:48px;
}
.grain::before{
  content:"";
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/></svg>");
  pointer-events:none;
  mix-blend-mode:multiply;
}

/* ---------- header / nav ---------- */
#site-header{
  background:rgba(250,246,238,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(62,92,80,0.12);
  transition:box-shadow .3s ease, background .3s ease;
}
#site-header.scrolled{ box-shadow:0 8px 24px -16px rgba(34,49,44,0.35); }

.logo-text{ letter-spacing:0.06em; }
.logo-text .jp{ font-family:'Shippori Mincho',serif; font-size:0.62rem; letter-spacing:0.22em; color:var(--c-juniper-500); display:block; }

.nav-link{
  position:relative; color:var(--c-juniper-800); font-size:0.92rem;
  padding-bottom:6px;
}
.nav-link::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--c-ocean-500); transition:width .35s ease;
}
.nav-link:hover::after, .nav-link.active::after{ width:100%; }
.nav-link.active{ color:var(--c-ocean-600); }

.dropdown-panel{
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.nav-item:hover .dropdown-panel,
.dropdown-panel.force-open{
  opacity:1; visibility:visible; transform:translateY(0);
}

#mobile-menu{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
#mobile-menu.open{ max-height:85vh; overflow-y:auto; }

.mobile-accordion-panel{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.mobile-accordion-panel.open{ max-height:600px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  padding:0.85rem 2rem; font-size:0.92rem; letter-spacing:0.05em;
  border-radius:2px; transition:all .3s ease; white-space:nowrap;
}
.btn-primary{
  background:var(--c-juniper-600); color:var(--c-ivory); border:1px solid var(--c-juniper-600);
}
.btn-primary:hover{ background:var(--c-juniper-700); box-shadow:var(--shadow-card); transform:translateY(-1px); }
.btn-outline{
  background:transparent; color:var(--c-juniper-700); border:1px solid var(--c-juniper-500);
}
.btn-outline:hover{ background:var(--c-juniper-600); color:var(--c-ivory); border-color:var(--c-juniper-600); }
.btn-ocean{ background:var(--c-ocean-600); color:var(--c-ivory); border:1px solid var(--c-ocean-600); }
.btn-ocean:hover{ background:var(--c-ocean-700); box-shadow:var(--shadow-card); }

/* ---------- hero ---------- */
.hero-shell{ position:relative; overflow:hidden; }
.hero-shell img{ transform:scale(1.02); }
.hero-overlay{
  background:linear-gradient(180deg, rgba(34,49,44,0.55) 0%, rgba(34,49,44,0.25) 45%, rgba(34,49,44,0.65) 100%);
}
.hero-tag{
  display:inline-flex; align-items:center; gap:0.6rem;
  font-size:0.75rem; letter-spacing:0.28em; text-transform:uppercase;
}
.hero-tag::before{ content:""; width:28px; height:1px; background:var(--c-sand-200); display:inline-block; }

/* ---------- cards ---------- */
.card{
  background:#fff; border:1px solid rgba(62,92,80,0.1);
  box-shadow:var(--shadow-card); transition:transform .35s ease, box-shadow .35s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-soft); }

.img-zoom{ overflow:hidden; }
.img-zoom img{ transition:transform .7s ease; }
.img-zoom:hover img{ transform:scale(1.08); }

.section-eyebrow{
  letter-spacing:0.28em; text-transform:uppercase; font-size:0.72rem; color:var(--c-ocean-600);
}

/* ---------- gallery / lightbox ---------- */
.gallery-item{ cursor:zoom-in; }
#lightbox{
  position:fixed; inset:0; z-index:100; display:none;
  background:rgba(22,27,24,0.92); backdrop-filter:blur(6px);
}
#lightbox.open{ display:flex; }
#lightbox img{ max-height:86vh; max-width:90vw; box-shadow:0 20px 60px rgba(0,0,0,0.5); }

/* ---------- accordion (FAQ) ---------- */
.faq-item .faq-a{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
.faq-item.open .faq-a{ max-height:400px; }
.faq-item .faq-icon{ transition:transform .3s ease; }
.faq-item.open .faq-icon{ transform:rotate(45deg); }

/* ---------- toast / non-blocking popup ---------- */
#toast-stack{
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:200;
  display:flex; flex-direction:column; gap:0.75rem; max-width:22rem;
}
.toast{
  background:var(--c-juniper-700); color:var(--c-ivory);
  border-left:4px solid var(--c-sand-400);
  padding:1rem 1.25rem; border-radius:3px; box-shadow:var(--shadow-soft);
  font-size:0.88rem; line-height:1.5;
  opacity:0; transform:translateX(30px); transition:all .4s ease;
}
.toast.show{ opacity:1; transform:translateX(0); }
.toast.toast-error{ background:#6a3733; border-left-color:#d98f80; }
.toast .toast-close{ cursor:pointer; opacity:0.7; }
.toast .toast-close:hover{ opacity:1; }

/* ---------- cookie banner ---------- */
#cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:150;
  transform:translateY(110%); transition:transform .5s ease;
}
#cookie-banner.show{ transform:translateY(0); }

/* ---------- back to top ---------- */
#back-to-top{
  position:fixed; right:1.5rem; bottom:1.5rem; z-index:90;
  width:44px; height:44px; border-radius:50%;
  background:var(--c-juniper-600); color:#fff;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:all .3s ease; box-shadow:var(--shadow-card);
}
#back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }

/* ---------- misc ---------- */
.divider-leaf{ width:1px; }
.stat-num{ font-family:'Cormorant Garamond',serif; }
.underline-grow{ position:relative; }
.underline-grow::after{
  content:""; position:absolute; left:0; bottom:-10px; height:1px; width:48px; background:var(--c-ocean-500);
}

input::placeholder, textarea::placeholder{ color:#9a9a90; }
input:focus, textarea:focus, select:focus{ outline:none; box-shadow:0 0 0 2px var(--c-ocean-300); }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--c-juniper-700); color:#fff; padding:0.5rem 1rem; z-index:999;
}
.skip-link:focus{ left:0; }

@media (max-width: 767px){
  .hero-shell{ min-height:70vh; }
}

.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }