/* =========================
   Video Background
========================= */

#bg-video {

    position: fixed;

    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

    object-fit: cover;

    z-index: -3;
}

.video-overlay {

    position: fixed;

    inset: 0;

    background: rgba(0,0,0,.45);

    z-index: -2;
}
/* =========================
   余白の記録
   Wabi-Sabi Theme
========================= */

:root {

    --ivory: #ffffff;
    --earth: #d8cdbd;
    --stone: #b7aea2;
     color:white;
   --charcoal: #3e3a36;

}

/* =========================
   Base
========================= */

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

html {
    scroll-behavior: smooth;
}

body {

    font-family: "Noto Sans JP", sans-serif;

    background: transparent;

    color: #ffffff;

    line-height: 2.2;

    letter-spacing: 0.08em;

    min-height: 100vh;
}
/* =========================
   和紙テクスチャ
========================= */


/* =========================
   Header
========================= */

.site-header {

    width: 100%;

    padding-top: 3rem;

    padding-left: 10vw;

    padding-right: 10vw;
}

.site-header nav {

    display: flex;

    justify-content: flex-end;

    gap: 2.5rem;
}

.site-header a {

    text-decoration: none;

    color: var(--ink);

    font-size: 1rem;

    transition: opacity .3s ease;
}

.site-header a:hover {

    opacity: .5;
}

/* =========================
   Vertical Label
========================= */

.vertical-label {

    position: fixed;

    left: 2rem;

    top: 30%;

    writing-mode: vertical-rl;

    color: var(--stone);

    letter-spacing: 0.5em;

    font-size: .9rem;

    z-index: 10;
}

/* =========================
   Hero
========================= */

.hero {

    min-height: 78vh;

    padding-left: 10vw;

    padding-right: 10vw;

    display: grid;

    grid-template-columns: 2fr 1fr;

    align-items: center;

    gap: 5rem;
}

.hero h1 {

    font-size: 6rem;

    font-weight: 300;

    line-height: 1.4;

    letter-spacing: .18em;
    text-shadow:
    0 2px 15px rgba(0,0,0,.4);
}

.subtitle {

    margin-top: 2rem;

    font-size: 1.2rem;

    color: var(--stone);
}

.hero-right {

    display: flex;

    flex-direction: column;

    gap: 2rem;

    align-items: flex-start;
}

.menu-link {

    text-decoration: none;

    color: var(--charcoal);

    font-size: 1.1rem;

    padding-bottom: .5rem;

    border-bottom: 1px solid var(--earth);
}

.menu-link:hover {

    opacity: .6;
}

/* =========================
   Content
========================= */

.intro,
.latest,
.preview,
.page-title,
.diary-entry {

    width: min(900px, 90%);

    margin-left: auto;

    margin-right: auto;
}

.intro,
.latest,
.preview {

    padding-top: 8rem;

    padding-bottom: 8rem;
}

.section-mark {

    color: var(--stone);

    margin-bottom: 3rem;

    font-size: .9rem;

    letter-spacing: .3em;

    text-transform: uppercase;
}

/* =========================
   Diary Entry
========================= */

.entry,
.diary-entry {

    padding-top: 3rem;

    padding-bottom: 3rem;

    border-bottom: 1px solid rgba(183,174,162,.35);
}

.entry h2,
.diary-entry h2 {

    font-size: 2rem;

    font-weight: 300;

    margin-bottom: 1.2rem;
}

.date,
.entry-date {

    color: var(--stone);

    margin-bottom: 1rem;
}

.diary-entry a {

    display: inline-block;

    margin-top: 1.5rem;

    text-decoration: none;

    color: var(--charcoal);
}

/* =========================
   Album Preview
========================= */

.preview-grid {

    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 2rem;
}

.photo-card img {

    width: 100%;

    border-radius: 18px;

    display: block;
}

/* =========================
   Album Page
========================= */

.album-page {

    padding-bottom: 10rem;
}

.page-title {

    padding-top: 8rem;

    padding-bottom: 6rem;
}

.page-title h1 {

    font-size: 4rem;

    font-weight: 300;

    margin-bottom: 1rem;
}

.gallery {

    width: min(1100px, 92%);

    margin: 0 auto;

    columns: 2;

    column-gap: 4rem;
}

.gallery-item {

    break-inside: avoid;

    margin-bottom: 4rem;
}

.gallery-image {

    width: 100%;

    border-radius: 22px;

    cursor: pointer;

    transition: filter .25s ease;
}

.gallery-image:hover {

    filter: brightness(.92);
}

.gallery figcaption {

    margin-top: 1rem;

    color: var(--stone);

    font-size: .95rem;
}

/* =========================
   Lightbox
========================= */

#lightbox {

    display: none;

    position: fixed;

    inset: 0;

    background: rgba(0,0,0,.82);

    justify-content: center;

    align-items: center;

    z-index: 999;
}

#lightbox img {

    max-width: 90%;

    max-height: 90%;
}

#close-lightbox {

    position: absolute;

    top: 2rem;

    right: 3rem;

    color: white;

    font-size: 2rem;

    cursor: pointer;
}

/* =========================
   Footer
========================= */

footer {

    text-align: center;

    padding: 3rem;

    color: var(--stone);

    font-size: .95rem;
}

/* =========================
   Fade Animation
========================= */

.fade-in {

    opacity: 0;

    transform: translateY(20px);

    transition:
        opacity .8s ease,
        transform .8s ease;
}

.fade-in.show {

    opacity: 1;

    transform: translateY(0);
}

/* =========================
   Mobile
========================= */

@media (max-width: 768px) {

    .vertical-label {

        display: none;
    }

    .site-header {

        padding-left: 8vw;
        padding-right: 8vw;
    }

    .site-header nav {

        justify-content: center;

        gap: 1.5rem;
    }

    .hero {

        grid-template-columns: 1fr;

        gap: 4rem;

        min-height: auto;

        padding-top: 8rem;

        padding-bottom: 8rem;
    }

    .hero h1 {

        font-size: 3.5rem;
    }

    .subtitle {

        font-size: 1.15rem;
    }

    .hero-right {

        gap: 1.5rem;
    }

    .page-title h1 {

        font-size: 2.8rem;
    }

    .entry h2,
    .diary-entry h2 {

        font-size: 1.7rem;
    }

    .preview-grid {

        grid-template-columns: 1fr;
    }

    .gallery {

        columns: 1;
    }

    body {

        font-size: 18px;
    }
}