*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{
    --bg:#0b0c0d;
    --text:#f3efe8;
    --muted:#8c8579;
    --gold:#b59a68;
    --line:rgba(181,154,104,.2);
}

html{
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

body{
    background:var(--bg);
    color:var(--text);

    font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;

    min-height:100vh;
    overflow-x:hidden;
    position:relative;
}

/* 金色氛围 */

body::before{
    content:"";

    position:fixed;

    width:700px;
    height:700px;

    top:-250px;
    right:-250px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(181,154,104,.08),
        transparent 70%
    );

    pointer-events:none;
}

/* 和纸颗粒 */

.noise{
    position:fixed;
    inset:0;

    background-image:
    radial-gradient(
        rgba(255,255,255,.03) 1px,
        transparent 1px
    );

    background-size:7px 7px;

    opacity:.3;

    pointer-events:none;
}

.container{
    width:min(1100px,90%);
    margin:auto;
}

header{
    padding-top:50px;
}

.logo{
    width:170px;
    display:block;
}

.hero{
    min-height:65vh;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding-top:40px;
}

.coming-soon{
    font-family:
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;

    color:var(--gold);

    font-size:11px;

    letter-spacing:.35em;

    margin-bottom:28px;
}

h1{
    font-weight:400;

    font-size:
    clamp(64px,10vw,140px);

    line-height:1;

    margin-bottom:20px;
}

.tagline{
    color:var(--muted);

    font-size:
    clamp(16px,2vw,22px);

    letter-spacing:.08em;

    margin-bottom:60px;
}

.divider{
    width:120px;
    height:1px;

    background:var(--line);

    margin-bottom:60px;
}

.opening{
    display:flex;
    flex-direction:column;
}

.year{

    font-family:
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;

    font-size:
    clamp(90px,15vw,120px);

    font-weight:200;

    line-height:.9;

    color:var(--text);
}

.date{

    margin-top:8px;

    font-family:
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;

    letter-spacing:.4em;

    font-size:13px;

    color:var(--gold);
}

.jp{
    margin-top:20px;

    font-size:
    clamp(20px,3vw,34px);

    color:var(--text);
}

.info{
    border-top:1px solid var(--line);

    padding:
    70px
    0
    100px;

    display:grid;

    grid-template-columns:
    1fr
    1fr;

    gap:80px;
}

.label{
    display:block;

    font-family:
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;

    color:var(--gold);

    font-size:11px;

    letter-spacing:.35em;

    margin-bottom:18px;
}

.info p{
    color:var(--muted);

    line-height:2.2;

    font-size:15px;
}

@media(max-width:768px){

    .container{
        width:88%;
    }

    header{
        padding-top:30px;
    }

    .logo{
        width:120px;
    }

    .hero{
        min-height:60vh;
    }

    .tagline{
        margin-bottom:40px;
    }

    .divider{
        margin-bottom:40px;
    }

    .info{
        grid-template-columns:1fr;
        gap:50px;

        padding:
        50px
        0
        60px;
    }

    .year{
        font-size:72px;
    }

    .jp{
        font-size:24px;
    }
}