:root{
  --night:#0d1424;--night-2:#0a0f1c;--mist:#eef0f4;--brass:#c4a878;
  --silver:#9aa6bd;--wine:#7a2436;--grey:#6b748a;--line:rgba(238,240,244,.13);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--night);color:var(--mist);font-family:'Zen Old Mincho',serif;overflow-x:hidden;-webkit-font-smoothing:antialiased;padding-top:45px}
body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
nav{position:fixed;top:45px;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:26px 56px;mix-blend-mode:difference}
nav .brand{color:#fff}
nav .brand-logo{display:block;height:40px;width:auto}
nav .reserve{font-family:'Marcellus',serif;letter-spacing:.26em;font-size:12px;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.45);padding:11px 24px;text-indent:.26em;transition:.5s}
nav .reserve:hover{background:#fff;color:var(--night)}
.hero{position:relative;height:100vh;width:100%;display:flex;align-items:center;overflow:hidden}
.hero video,.hero .video-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero .hero-video{z-index:1;background:#0a0f1c}
.video-fallback{background:radial-gradient(ellipse at 75% 35%, rgba(122,36,54,.28), transparent 50%),radial-gradient(circle at 25% 70%, rgba(154,166,189,.14), transparent 55%),linear-gradient(160deg,#10182b 0%, #0a0f1c 70%);animation:drift 20s ease-in-out infinite alternate}
@keyframes drift{0%{transform:scale(1.06)}100%{transform:scale(1.18) translate(2%,-1%)}}
.hero::after{content:"";position:absolute;inset:0;z-index:2}
.hero .inner{position:relative;z-index:3;padding:0 56px;max-width:1000px}
.hero .eyebrow{font-family:'Marcellus',serif;letter-spacing:.5em;font-size:12px;color:var(--brass);text-indent:.5em;margin-bottom:40px;opacity:0;animation:fadeUp 1.4s .3s forwards;display:flex;align-items:center;gap:18px}
.hero .eyebrow::before{content:"";width:46px;height:1px;background:var(--brass);display:inline-block}
.hero h2{font-family:'Zen Old Mincho',serif;font-weight:600;font-size:clamp(34px,6vw,76px);line-height:1.42;letter-spacing:.06em;text-shadow:0 4px 50px rgba(0,0,0,.6)}
.hero h2 .line{display:block;overflow:hidden}
.hero h2 .line span{display:block;opacity:0;transform:translateY(110%);animation:reveal 1.5s cubic-bezier(.16,1,.3,1) forwards}
.hero h2 .line:nth-child(1) span{animation-delay:.5s}
.hero h2 .line:nth-child(2) span{animation-delay:.74s}
.hero h2 em{font-family:'EB Garamond',serif;font-style:italic;font-weight:400;color:var(--brass)}
.hero .sub{margin-top:36px;font-size:14px;letter-spacing:.2em;color:rgba(238,240,244,.8);line-height:2;opacity:0;animation:fadeUp 1.4s 1.3s forwards;max-width:460px}
.scrollcue{position:absolute;bottom:36px;right:56px;z-index:3;font-family:'Marcellus',serif;letter-spacing:.3em;font-size:10px;color:rgba(238,240,244,.55);opacity:0;animation:fadeUp 2s 2s forwards;display:flex;align-items:center;gap:14px}
.scrollcue .bar{width:1px;height:42px;background:linear-gradient(180deg,var(--brass),transparent);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.3);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes reveal{to{opacity:1;transform:translateY(0)}}
section{position:relative;padding:170px 56px}
.label{font-family:'Marcellus',serif;letter-spacing:.46em;font-size:14px;color:var(--brass);text-indent:.46em;margin-bottom:46px;display:flex;align-items:center;gap:16px}
.label::before{content:"";width:28px;height:1px;background:var(--brass)}
.label.center{justify-content:center}
.reveal-up{opacity:0;transform:translateY(42px);transition:1.3s cubic-bezier(.16,1,.3,1)}
.reveal-up.in{opacity:1;transform:translateY(0)}
.concept{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:.4fr .6fr;gap:60px;align-items:center}
.concept .mark{font-family:'EB Garamond',serif;font-style:italic;font-size:clamp(60px,9vw,150px);line-height:.9;color:var(--wine);opacity:.9}
.concept .mark small{display:block;font-family:'Marcellus',serif;font-style:normal;font-size:13px;letter-spacing:.4em;color:var(--silver);margin-top:24px}
.concept p{font-family:'Zen Old Mincho',serif;font-weight:500;font-size:clamp(15px,1.6vw,19px);line-height:2.1;letter-spacing:.09em}
.concept-head{font-family:'Zen Old Mincho',serif;font-weight:600;font-size:clamp(24px,3vw,38px);letter-spacing:.1em;margin-bottom:40px;line-height:1.6}
.concept-head::after{content:"";display:block;width:40px;height:1px;background:var(--brass);margin-top:28px}
.section-divider{width:1px;height:96px;margin:0 auto;background:linear-gradient(var(--brass),transparent)}
.exp{display:grid;grid-template-columns:1fr 1fr;max-width:1320px;margin:0 auto}
.exp .visual{min-height:600px;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 42%, rgba(122,36,54,.34), transparent 60%),linear-gradient(150deg,#13192c,#090d18)}
.exp .visual::before{content:"A NIGHT HERE";position:absolute;bottom:32px;left:32px;font-family:'Marcellus',serif;letter-spacing:.36em;font-size:11px;color:rgba(238,240,244,.5)}
.exp .visual .ring{position:absolute;top:50%;left:50%;width:260px;height:260px;border:1px solid var(--line);border-radius:50%;transform:translate(-50%,-50%);animation:spin 30s linear infinite}
.exp .visual .ring:nth-child(2){width:400px;height:400px;animation-duration:46s;animation-direction:reverse;border-color:rgba(196,168,120,.2)}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.exp .body{padding:90px 70px;display:flex;flex-direction:column;justify-content:center;background:#0b1020}
.exp .body h2{font-family:'Zen Old Mincho',serif;font-weight:600;font-size:clamp(23px,2.9vw,36px);line-height:1.7;letter-spacing:.07em;margin-bottom:38px}
.exp .body p{font-size:15px;line-height:2.5;color:rgba(238,240,244,.74);letter-spacing:.05em}
.exp .body .dur{margin-top:44px;font-family:'Marcellus',serif;letter-spacing:.28em;font-size:13px;color:var(--brass)}
.mag{max-width:1140px;margin:0 auto;display:grid;grid-template-columns:.8fr 1.2fr;gap:88px;align-items:center}
.mag .portrait{aspect-ratio:3/4;position:relative;overflow:hidden;background:linear-gradient(160deg,#161d33,#090d18);border:1px solid var(--line)}
.mag .portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mag .portrait:has(img)::after{display:none}
.mag .portrait::after{content:"PORTRAIT";position:absolute;bottom:22px;left:22px;font-family:'Marcellus',serif;letter-spacing:.32em;font-size:10px;color:rgba(238,240,244,.4)}
.mag h2{font-family:'Zen Old Mincho',serif;font-weight:600;font-size:clamp(25px,3vw,40px);line-height:1.55;letter-spacing:.07em;margin-bottom:16px}
.mag .name{font-family:'Marcellus',serif;letter-spacing:.18em;font-size:16px;color:var(--brass);margin-bottom:40px}
.mag .name small{color:var(--silver);letter-spacing:.1em;font-size:13px}
.mag ul{list-style:none;border-top:1px solid var(--line)}
.mag li{padding:18px 0;border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.7;color:rgba(238,240,244,.84);letter-spacing:.03em;display:flex;gap:18px;align-items:baseline}
.mag li b{color:var(--brass);font-weight:600}
.mag li .yr{font-family:'Marcellus',serif;color:var(--silver);font-size:12px;letter-spacing:.08em;flex-shrink:0;width:60px}
.mag .close{margin-top:40px;font-size:15px;line-height:2.3;color:rgba(238,240,244,.72);letter-spacing:.05em}
.info{max-width:900px;margin:0 auto}
.info h2{font-family:'Zen Old Mincho',serif;font-weight:500;text-align:center;font-size:clamp(23px,2.6vw,33px);letter-spacing:.13em;margin-bottom:70px}
.info .row{display:grid;grid-template-columns:210px 1fr;gap:26px;padding:25px 0;border-bottom:1px solid var(--line);align-items:baseline}
.info .row dt{font-family:'Marcellus',serif;letter-spacing:.2em;font-size:14px;color:var(--brass)}
.info .row dd{font-size:15px;line-height:1.9;color:rgba(238,240,244,.86);letter-spacing:.04em}
.info .row dd b{font-size:23px;color:#fff;font-weight:600}
.info .note{text-align:center;margin-top:60px;font-size:15px;line-height:2.2;color:var(--silver);letter-spacing:.07em}
.access{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line)}
.access .map{position:relative;min-height:440px;overflow:hidden;background:linear-gradient(150deg,#121829,#090d18);padding:20px}
.access .map .pin{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}
.access .map .pin .dot{width:14px;height:14px;border-radius:50%;background:var(--wine);margin:0 auto 14px;box-shadow:0 0 0 0 rgba(122,36,54,.6);animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(122,36,54,.5)}100%{box-shadow:0 0 0 40px rgba(122,36,54,0)}}
.access .map .pin span{font-family:'Marcellus',serif;letter-spacing:.3em;font-size:11px;color:var(--silver)}
.access .map::after{content:"MAP";position:absolute;bottom:24px;left:24px;font-family:'Marcellus',serif;letter-spacing:.34em;font-size:10px;color:rgba(238,240,244,.4)}
.access .detail{padding:74px 64px;display:flex;flex-direction:column;justify-content:center;background:#0b1020}
.access .detail h2{font-family:'Zen Old Mincho',serif;font-weight:600;font-size:clamp(22px,2.6vw,32px);letter-spacing:.08em;margin-bottom:34px;line-height:1.6}
.access .detail .item{padding:18px 0;border-bottom:1px solid var(--line)}
.access .detail .item dt{font-family:'Marcellus',serif;letter-spacing:.2em;font-size:11px;color:var(--brass);margin-bottom:8px}
.access .detail .item dd{font-size:15px;line-height:1.9;color:rgba(238,240,244,.85);letter-spacing:.04em}
.reserve-sec{text-align:center;max-width:700px;margin:0 auto}
.reserve-sec h2{font-family:'Zen Old Mincho',serif;font-weight:500;font-size:clamp(25px,3.2vw,42px);letter-spacing:.11em;margin-bottom:28px;line-height:1.6}
.reserve-sec p{font-size:15px;line-height:2.1;color:rgba(238,240,244,.74);letter-spacing:.05em;margin-bottom:56px}
.btns{display:flex;gap:22px;justify-content:center;flex-wrap:wrap}
.btns a{font-family:'Zen Old Mincho',serif;font-size:15px;letter-spacing:.13em;text-decoration:none;padding:23px 50px;transition:.5s;font-weight:500;min-width:250px}
.btns .line{background:var(--brass);color:var(--night)}
.btns .line:hover{background:#d8bd8f;transform:translateY(-3px)}
.btns .tel{border:1px solid rgba(238,240,244,.38);color:var(--mist)}
.btns .tel:hover{border-color:var(--brass);color:var(--brass);transform:translateY(-3px)}
.reserve-sec .small{margin-top:36px;font-size:13px;color:var(--grey);letter-spacing:.07em;line-height:1.9}
footer{padding:96px 56px 54px;border-top:1px solid var(--line);text-align:center}
footer .logo{font-family:'Marcellus',serif;letter-spacing:.38em;font-size:19px;text-indent:.38em}
footer .logo small{display:block;font-family:'EB Garamond',serif;font-style:italic;font-size:16px;color:var(--brass);letter-spacing:.08em;margin-top:8px}
footer .sns{display:flex;gap:30px;justify-content:center;align-items:center;margin:38px 0;font-family:'Marcellus',serif;letter-spacing:.18em;font-size:14px}
footer .sns a{color:rgba(238,240,244,.7);text-decoration:none;transition:.4s}
footer .sns a:hover{color:var(--brass)}
footer .legal{font-size:11px;line-height:2;color:var(--grey);letter-spacing:.04em}
footer .copy{margin-top:32px;font-family:'Marcellus',serif;font-size:11px;letter-spacing:.3em;color:var(--grey)}
.open-notice{background:#0d1424;color:var(--mist);text-align:center;font-family:'Marcellus',serif;font-size:13px;letter-spacing:.18em;text-indent:.18em;padding:13px 16px;position:fixed;top:0;left:0;right:0;z-index:101;border-bottom:1px solid rgba(238,240,244,.12)}

@media(max-width:880px){
  body{padding-top:38px}
  .open-notice{font-size:11px;letter-spacing:.12em;padding:11px 14px}
  nav{top:38px;padding:18px 24px}nav .brand-logo{height:18px}
  section{padding:104px 24px}.hero .inner{padding:0 26px}.scrollcue{left:26px}
  .concept{grid-template-columns:1fr;gap:30px}.exp,.access{grid-template-columns:1fr}
  .exp .visual,.access .map{min-height:320px}.exp .body,.access .detail{padding:54px 30px}
  .mag{grid-template-columns:1fr;gap:48px}.info .row{grid-template-columns:1fr;gap:6px}.btns a{width:100%}
}
