
:root{
  --amber:#c8842a; --amber-light:#eab766; --amber-soft:#f3d9a8;
  --ivory:#f8f3e9; --ivory-deep:#efe6d4;
  --charcoal:#211f1c; --charcoal-soft:#33302b;
  --beige:#ddd0b8; --midnight:#151c31; --midnight-soft:#232c46;
  --font-en:'Fraunces',serif; --font-jp-serif:'Shippori Mincho',serif; --font-jp-sans:'Zen Kaku Gothic New',sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--ivory); color:var(--charcoal);
  font-family:var(--font-jp-sans); line-height:1.9; overflow-x:hidden;
  background-image:url('background-warm-gradient-paper.webp');
  background-size:400px; background-blend-mode:overlay; background-attachment:fixed;
  background-color:var(--ivory);
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
::selection{background:var(--amber); color:#fff;}
.jp{font-family:var(--font-jp-serif); font-weight:500;}
.jp-small{font-family:var(--font-jp-serif); font-size:.72em; opacity:.75; display:inline-block; margin-left:.4em;}
.eyebrow{
  font-family:var(--font-en); letter-spacing:.32em; text-transform:uppercase;
  font-size:.78rem; color:var(--amber); font-weight:500;
}
h1,h2,h3{font-family:var(--font-en); font-weight:500; margin:.2em 0; color:var(--charcoal);}
h1{font-size:clamp(2.4rem,6vw,4.6rem); line-height:1.05; letter-spacing:-.01em;}
h2{font-size:clamp(1.9rem,4.4vw,3rem); line-height:1.15;}
h3{font-size:1.4rem;}
p{margin:.6em 0;}
.container{max-width:1280px; margin:0 auto; padding:0 6vw;}
.btn{
  display:inline-flex; align-items:center; gap:.6em; padding:.95em 2.2em;
  border-radius:100px; font-family:var(--font-en); letter-spacing:.06em; font-size:.92rem;
  border:1px solid var(--amber); cursor:pointer; transition:.4s ease; position:relative; overflow:hidden;
}
.btn-solid{background:var(--amber); color:#fff; box-shadow:0 0 0 0 rgba(200,132,42,.6);}
.btn-solid:hover{box-shadow:0 0 28px 4px rgba(200,132,42,.55); transform:translateY(-2px); background:var(--amber-light);}
.btn-outline{background:transparent; color:var(--ivory); border-color:rgba(247,242,233,.55);}
.btn-outline:hover{background:rgba(247,242,233,.12); border-color:#fff; box-shadow:0 0 24px rgba(255,255,255,.25);}
.btn-dark{border-color:var(--charcoal); color:var(--charcoal);}
.btn-dark:hover{background:var(--charcoal); color:var(--ivory); box-shadow:0 0 24px rgba(33,31,28,.35);}

/* header */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(21,19,17,.28); backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:background .5s ease, box-shadow .5s ease;
}
.site-header.scrolled{background:rgba(21,19,17,.78); box-shadow:0 8px 30px rgba(0,0,0,.25);}
.header-inner{
  max-width:1440px; margin:0 auto; padding:0 5vw; height:82px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo-mark{display:flex; align-items:center; gap:.7em;}
.logo-img{width:42px; height:42px; border-radius:50%; object-fit:cover; box-shadow:0 0 18px rgba(234,183,102,.55); border:1px solid rgba(255,255,255,.3);}
.logo-text{display:flex; flex-direction:column; line-height:1.1;}
.logo-en{font-family:var(--font-en); color:#fff; font-size:1.05rem; letter-spacing:.14em;}
.logo-jp{font-family:var(--font-jp-serif); color:var(--amber-soft); font-size:.68rem; letter-spacing:.1em;}
.main-nav ul{display:flex; gap:1.9em; list-style:none; margin:0; padding:0;}
.nav-link{display:flex; flex-direction:column; align-items:center; color:rgba(255,255,255,.82); position:relative; padding:.3em 0;}
.nav-en{font-family:var(--font-en); font-size:.86rem; letter-spacing:.05em;}
.nav-jp{font-family:var(--font-jp-serif); font-size:.62rem; color:var(--amber-soft); margin-top:.1em;}
.nav-link::after{content:''; position:absolute; bottom:-6px; left:0; width:0; height:1px; background:var(--amber-light); transition:width .35s ease;}
.nav-link:hover::after, .nav-link.active::after{width:100%;}
.nav-link.active .nav-en{color:var(--amber-light);}
.menu-toggle{display:none; flex-direction:column; justify-content:center; gap:5px; width:34px; height:34px; background:none; border:none; cursor:pointer; padding:0;}
.menu-toggle span{width:100%; height:1.5px; background:#fff; transition:.35s;}
.menu-toggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.menu-toggle.open span:nth-child(2){opacity:0;}
.menu-toggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* hero */
.hero{position:relative; min-height:100vh; display:flex; align-items:flex-end; overflow:hidden; color:#fff;}
.hero-bg{position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.08);}
.hero-scrim{position:absolute; inset:0; background:linear-gradient(180deg,rgba(21,19,17,.35) 0%,rgba(21,19,17,.25) 40%,rgba(21,19,17,.92) 100%);}
.hero-content{position:relative; z-index:2; padding:0 6vw 9vw; width:100%;}
.hero-eyebrow{letter-spacing:.4em; text-transform:uppercase; font-size:.78rem; color:var(--amber-soft); font-family:var(--font-en);}
.hero h1{color:#fff; margin-top:.4em; text-shadow:0 4px 30px rgba(0,0,0,.35);}
.hero .jp-lead{font-size:1.3rem; margin-top:.5em; color:var(--ivory-deep);}
.hero-ctas{display:flex; gap:1.1em; margin-top:2.2em; flex-wrap:wrap;}
.scroll-cue{position:absolute; bottom:2.4em; left:50%; transform:translateX(-50%); z-index:2; color:#fff; opacity:.75; font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; text-align:center;}
.scroll-cue span{display:block; width:1px; height:38px; background:#fff; margin:.6em auto 0; animation:scrollLine 2.2s ease-in-out infinite;}
@keyframes scrollLine{0%{transform:scaleY(0); transform-origin:top;} 50%{transform:scaleY(1); transform-origin:top;} 51%{transform-origin:bottom;} 100%{transform:scaleY(0); transform-origin:bottom;}}

/* page banner (sub pages) */
.page-banner{position:relative; min-height:56vh; display:flex; align-items:center; color:#fff; overflow:hidden;}
.page-banner .hero-bg{transform:scale(1.02);}
.page-banner .hero-content{padding-bottom:0; padding-top:5em;}

/* floating lantern decorations */
.float-lantern{position:absolute; border-radius:50%; background:radial-gradient(circle at 35% 30%, rgba(234,183,102,.95), rgba(200,132,42,.15) 60%, transparent 72%); filter:blur(1px); animation:floaty 7s ease-in-out infinite; z-index:2; pointer-events:none;}
@keyframes floaty{0%,100%{transform:translateY(0) translateX(0);} 50%{transform:translateY(-22px) translateX(8px);}}

/* sections */
section{position:relative; padding:7.5em 0;}
.section-head{max-width:760px; margin-bottom:3em;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}

.reveal{opacity:0; transform:translateY(38px); transition:opacity 1s cubic-bezier(.2,.7,.3,1), transform 1s cubic-bezier(.2,.7,.3,1);}
.reveal.in-view{opacity:1; transform:none;}
.reveal-delay-1.in-view{transition-delay:.12s;}
.reveal-delay-2.in-view{transition-delay:.24s;}
.reveal-delay-3.in-view{transition-delay:.36s;}

/* editorial */
.editorial{display:grid; grid-template-columns:1fr 1fr; gap:5vw; align-items:center;}
.editorial.reverse{direction:rtl;}
.editorial.reverse > *{direction:ltr;}
.editorial-media{position:relative; border-radius:6px; overflow:hidden; aspect-ratio:4/5; isolation:isolate;}
.editorial-media img{width:100%; height:100%; object-fit:cover; transition:transform 1.4s cubic-bezier(.2,.7,.3,1);}
.editorial-media:hover img{transform:scale(1.06);}
.editorial-media::after{content:''; position:absolute; inset:0; box-shadow:inset 0 0 60px rgba(0,0,0,.25);}
.editorial-text p{color:var(--charcoal-soft); font-size:1.03rem;}

/* cards */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2.2em;}
.card{background:rgba(255,255,255,.4); border:1px solid rgba(33,31,28,.08); border-radius:8px; overflow:hidden; transition:.5s ease; position:relative;}
.card:hover{transform:translateY(-8px); box-shadow:0 26px 50px -20px rgba(33,31,28,.35); border-color:var(--amber);}
.card-media{aspect-ratio:5/4; overflow:hidden;}
.card-media img{width:100%; height:100%; object-fit:cover; transition:transform 1s ease;}
.card:hover .card-media img{transform:scale(1.08);}
.card-body{padding:1.6em 1.7em 1.9em;}
.card-body .eyebrow{font-size:.68rem;}
.card-body h3{margin:.25em 0 .3em; font-size:1.25rem;}
.card-body p{font-size:.92rem; color:var(--charcoal-soft); margin:.4em 0 1em;}
.card-link{font-family:var(--font-en); font-size:.82rem; letter-spacing:.08em; color:var(--amber); border-bottom:1px solid var(--amber); padding-bottom:2px;}

/* dark section */
.section-dark{background:linear-gradient(180deg,var(--midnight),var(--midnight-soft)); color:var(--ivory);}
.section-dark h2, .section-dark h1{color:#fff;}
.section-dark .editorial-text p{color:rgba(248,243,233,.78);}
.section-dark .eyebrow{color:var(--amber-light);}

/* stats */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:2em; text-align:center;}
.stat b{font-family:var(--font-en); font-size:2.6rem; color:var(--amber); display:block;}
.stat span{font-size:.85rem; color:var(--charcoal-soft);}

/* gallery masonry */
.masonry{columns:3 220px; column-gap:1.4em;}
.masonry figure{margin:0 0 1.4em; break-inside:avoid; position:relative; border-radius:6px; overflow:hidden; cursor:zoom-in;}
.masonry figure img{width:100%; transition:transform .8s ease, filter .6s ease;}
.masonry figure:hover img{transform:scale(1.05);}
.masonry figcaption{position:absolute; left:0; right:0; bottom:0; padding:1em 1.1em; background:linear-gradient(0deg,rgba(0,0,0,.75),transparent); color:#fff; font-size:.82rem; opacity:0; transition:.4s;}
.masonry figure:hover figcaption{opacity:1;}

/* lightbox */
.lightbox{position:fixed; inset:0; background:rgba(10,9,8,.92); z-index:4000; display:none; align-items:center; justify-content:center; padding:5vw;}
.lightbox.open{display:flex;}
.lightbox img{max-width:100%; max-height:86vh; border-radius:4px; box-shadow:0 30px 80px rgba(0,0,0,.6);}
.lightbox-close{position:absolute; top:2em; right:3em; color:#fff; font-size:2rem; background:none; border:none; cursor:pointer;}
.lightbox-cap{position:absolute; bottom:2.2em; color:var(--amber-soft); font-family:var(--font-jp-serif); font-size:.95rem;}

/* materials list */
.material-row{display:grid; grid-template-columns:.9fr 1.3fr; gap:5vw; align-items:center; padding:4em 0; border-bottom:1px solid rgba(33,31,28,.1);}
.material-row:last-child{border-bottom:none;}
.material-row .num{font-family:var(--font-en); font-size:.85rem; color:var(--amber); letter-spacing:.2em;}
.material-media{border-radius:6px; overflow:hidden; aspect-ratio:16/11;}
.material-media img{width:100%; height:100%; object-fit:cover;}

/* faq accordion */
.faq-item{border-bottom:1px solid rgba(33,31,28,.14); padding:1.6em 0;}
.faq-q{display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-family:var(--font-en); font-size:1.08rem;}
.faq-q .plus{width:22px; height:22px; position:relative; flex:none; margin-left:1em;}
.faq-q .plus::before, .faq-q .plus::after{content:''; position:absolute; background:var(--amber); transition:.4s;}
.faq-q .plus::before{left:0; top:50%; width:100%; height:1.5px; transform:translateY(-50%);}
.faq-q .plus::after{top:0; left:50%; width:1.5px; height:100%; transform:translateX(-50%);}
.faq-item.open .plus::after{transform:translateX(-50%) rotate(90deg); opacity:0;}
.faq-a{max-height:0; overflow:hidden; transition:max-height .45s ease;}
.faq-a p{color:var(--charcoal-soft); padding-top:.8em; max-width:640px;}

/* contact form */
.contact-wrap{display:grid; grid-template-columns:1fr 1fr; gap:5vw;}
.form-field{margin-bottom:1.4em;}
.form-field label{display:block; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; font-family:var(--font-en); color:var(--charcoal-soft); margin-bottom:.5em;}
.form-field input, .form-field textarea, .form-field select{
  width:100%; padding:.9em 1em; border:1px solid rgba(33,31,28,.25); background:rgba(255,255,255,.55);
  border-radius:4px; font-family:var(--font-jp-sans); font-size:.95rem; transition:.3s;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{outline:none; border-color:var(--amber); box-shadow:0 0 0 3px rgba(200,132,42,.15);}
.info-block{display:flex; gap:1em; margin-bottom:1.8em; align-items:flex-start;}
.info-block .ico{width:44px; height:44px; border-radius:50%; background:var(--amber-soft); flex:none; display:flex; align-items:center; justify-content:center; color:var(--amber); font-family:var(--font-en);}
.map-frame{border-radius:8px; overflow:hidden; margin-top:1.6em; border:1px solid rgba(33,31,28,.12);}

/* footer */
.site-footer{background:var(--charcoal); color:var(--beige); position:relative; overflow:hidden; padding-top:5em;}
.footer-glow{position:absolute; top:-140px; left:50%; transform:translateX(-50%); width:600px; height:280px; background:radial-gradient(ellipse, rgba(200,132,42,.35), transparent 70%); filter:blur(20px);}
.footer-inner{position:relative; z-index:1; max-width:1280px; margin:0 auto; padding:0 6vw 3em; display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:3em;}
.footer-logo{width:52px; height:52px; border-radius:50%; margin-bottom:1em;}
.footer-tagline{font-family:var(--font-en); font-size:1.05rem; color:#fff;}
.footer-tagline .jp{font-size:.85rem; color:var(--amber-soft); display:block; margin-top:.4em;}
.footer-nav h3, .footer-contact h3{font-family:var(--font-en); font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; color:var(--amber-light); margin-bottom:1em;}
.footer-links{display:flex; flex-direction:column; gap:.7em; font-size:.92rem;}
.footer-contact p{font-size:.9rem; color:var(--beige); margin:.4em 0;}
.footer-bottom{position:relative; z-index:1; border-top:1px solid rgba(255,255,255,.08); padding:1.6em 6vw; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6em; font-size:.78rem; color:rgba(221,208,184,.7);}

/* toast */
#toastContainer{position:fixed; bottom:2em; right:2em; z-index:5000; display:flex; flex-direction:column; gap:.7em;}
.toast{background:var(--charcoal); color:var(--ivory); padding:1em 1.4em; border-radius:6px; border-left:3px solid var(--amber); box-shadow:0 20px 40px rgba(0,0,0,.3); font-size:.9rem; max-width:320px; opacity:0; transform:translateY(12px); transition:.4s ease;}
.toast.show{opacity:1; transform:translateY(0);}

/* breadcrumb */
.breadcrumb{font-size:.78rem; letter-spacing:.05em; color:rgba(255,255,255,.7); font-family:var(--font-en); margin-bottom:.6em;}
.breadcrumb a{color:var(--amber-soft);}

/* 404 */
.notfound{min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; position:relative; overflow:hidden;}
.notfound-num{font-family:var(--font-en); font-size:clamp(6rem,22vw,13rem); color:transparent; -webkit-text-stroke:1.5px var(--amber); line-height:1;}

@media(max-width:980px){
  .editorial, .contact-wrap{grid-template-columns:1fr;}
  .editorial.reverse{direction:ltr;}
  .card-grid{grid-template-columns:repeat(2,1fr);}
  .stats{grid-template-columns:repeat(2,1fr); row-gap:2em;}
  .footer-inner{grid-template-columns:1fr; gap:2.4em;}
  .material-row{grid-template-columns:1fr;}
}
@media(max-width:760px){
  .main-nav{position:fixed; top:82px; left:0; right:0; background:rgba(21,19,17,.97); backdrop-filter:blur(16px); max-height:0; overflow:hidden; transition:max-height .5s ease;}
  .main-nav.open{max-height:640px;}
  .main-nav ul{flex-direction:column; padding:1.6em 6vw 2.4em; gap:1em;}
  .nav-link{flex-direction:row; gap:.6em; justify-content:flex-start;}
  .menu-toggle{display:flex;}
  .card-grid{grid-template-columns:1fr;}
  .masonry{columns:1;}
  section{padding:4.5em 0;}
}
