:root {
    --ink: #121314;
    --ink-soft: #2a2e33;
    --paper: #f5f0e9;
    --accent: #b88952;
    --card: rgba(255, 255, 255, 0.78);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-items: center;
    text-align: center;
    font-family: "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    color: var(--ink);
    position: relative;
    overflow: hidden;
    background-color: #121212;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: url("macalon_photo.jpg") center / cover no-repeat;
    z-index: 0;
    transform: scale(1.02);
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(1200px 600px at 10% 10%, rgba(15, 15, 15, 0.6), transparent 60%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.35));
    z-index: 1;
}

.site-closure {
    position: relative;
    z-index: 2;
    width: min(760px, 92vw);
    padding: 48px 48px 42px;
    background: var(--card);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
}

.badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-soft);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(184, 137, 82, 0.4);
}

h1 {
    margin: 20px 0 12px;
    font-size: clamp(28px, 4vw, 42px);
    letter-spacing: 0.08em;
    color: var(--ink);
}

.lead {
    font-size: clamp(16px, 2vw, 20px);
    margin: 0 0 14px;
    color: var(--ink-soft);
}

.thanks {
    font-size: clamp(16px, 2vw, 20px);
    margin: 0 0 22px;
    color: var(--ink);
}

.meta {
    font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
    font-size: 12px;
    letter-spacing: 0.18em;
    color: rgba(18, 19, 20, 0.6);
}

@media (max-width: 640px) {
    .site-closure {
        padding: 36px 24px 32px;
        border-radius: 16px;
    }

    .badge {
        letter-spacing: 0.14em;
    }
}