/* --- PALETTE ------------------------------------------------------- */


:root {
    --miyako-blue: #006f9c;
    --text-dark: #111;
    --text-soft: #444;
    --bg-light: #ffffff;
    --border-light: #e6e6e6;
}

/* --- BASE ----------------------------------------------------------- */
body {
    margin: 0;
    padding: 0;
    font-family: "Montserrat", sans-serif;
    letter-spacing: 0.04em;
    background: #f5f4f0;
    color: var(--text-dark);
}

/*
:root {
    --miyako-blue: #006f9c;
    --text-light: #e8e8e8;
    --text-dim: #bbbbbb;
    --bg-dark: #0a0a0a;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Montserrat", sans-serif;
    letter-spacing: 0.04em;
    background: var(--bg-dark);
    color: var(--text-light);
}
*/

/* HEADER -------------------------------------------------------------- */

.header {
    text-align: center;
    padding-top: 3.5rem;
    padding-bottom: 1rem;
}



/*NAVIGATION*/

.title {
    font-size: 1.7rem;
    font-weight: 500;
    margin: 0 0 2.5rem 0;
    letter-spacing: 0.18em;
    color: var(--miyako-blue);
}

nav {
    display: flex;
    justify-content: center;
    margin-bottom: 0.6rem !important;
}

.menu {
    display: flex;
    justify-content: space-between;
    max-width: 780px;
    /* matches stroke width */
    width: 100%;
    padding: 0;
    margin-bottom: 0 !important;
}

.menu li {
    list-style: none;
    margin: 0;
}

.menu a {
    text-decoration: none;
    color: var(--text-light);
    padding: 0 0.6rem;
}



/* FORCE FOOTER TO BE CENTERED AND RESPONSIVE */
.footer {
    width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: block;
    padding-top: 8rem;
    padding-bottom: 0.5rem;
    font-size: 0.85rem;
    opacity: 0.7;
    letter-spacing: 0.08em;
    color: var(--miyako-blue);
}


/*PICTURE BAND */
.picture-band {
    width: min(780px, 80%);
    height: 60px;
    background-image: url("./gallery/band.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0.5rem auto 1.2rem;
    margin-top: 0 !important;
}


/*PICTURE BAND */
.sky-band {
    width: min(780px, 80%);
    height: 60px;
    background-image: url("./gallery/skyband.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0.5rem auto 1.2rem;
    margin-top: 0 !important;
}


/*PICTURE BAND */
.curry-summer-band {
    width: min(780px, 80%);
    height: 60px;
    background-image: url("./gallery/currysummerband.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0.5rem auto 1.2rem;
    margin-top: 0 !important;
}



/*PICTURE BAND */
.interface-frequency-band {
    width: min(780px, 80%);
    height: 60px;
    background-image: url("./gallery/interfacefrequencyband.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0.5rem auto 1.2rem;
    margin-top: 0 !important;
}



/*PICTURE BAND */
.molecular-band {
    width: min(780px, 80%);
    height: 60px;
    background-image: url("./gallery/molecularband.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0.5rem auto 1.2rem;
    margin-top: 0 !important;
}



/*PICTURE BAND */
.star-band {
    width: min(780px, 80%);
    height: 60px;
    background-image: url("./gallery/starband.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0.5rem auto 1.2rem;
    margin-top: 0 !important;
}


/* ===========================================================
   POEM BOOK — PAGE TURNING SYSTEM
   (SAFE ADDITION: does not conflict with any of your styles)
   =========================================================== */

.poem-wrapper {
    position: relative;
    /* enables arrow positioning */
}

/* Each poem becomes a "page" */
.poem-page {
    display: none;
    /* only current poem is visible */
    animation: fadeIn 0.35s ease;
}

/* Fade-in animation when turning pages */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Left/right arrows */
.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2.4rem;
    color: var(--miyako-blue);
    cursor: pointer;
    opacity: 0.5;
    user-select: none;
    transition: opacity 0.25s ease;
    font-weight: 300;
}

.arrow:hover {
    opacity: 0.9;
}

.left-arrow {
    left: -3rem;
    /* adjust if needed */
}

.right-arrow {
    right: -3rem;
}

/* Optional: center and soften author name */
.poem-author {
    margin-top: 2rem;
    font-size: 1rem;
    opacity: 0.7;
    font-weight: 300;
}



/* ABOUT PAGE */

.about-wrapper {
    max-width: 800px;
    margin: 4rem auto 6rem;
    padding: 0 1.5rem;
}

.about-text h2 {
    text-align: center;
    font-weight: 400;
    letter-spacing: 0.15rem;
    color: #1577A3;
    /* Miyako accent */
    margin-bottom: 2.5rem;
    font-size: 1.6rem;
}

.about-text p {
    font-size: 1.15rem;
    max-width: 700px;
    line-height: 1.9rem;
    color: #222;
    opacity: 0.9;
    margin: 0 auto;
    font-weight: 300;
    text-align: center;
    letter-spacing: 0.02rem;
    padding: 0 1rem;
}

/* POEMS PAGE */

.poem-wrapper {
    max-width: 750px;
    margin: 4rem auto 6rem;
    padding: 0 1.5rem;
}

.poem-title {
    text-align: center;
    color: #1577A3;
    /* Miyako blue */
    font-size: 1.3rem;
    letter-spacing: 0.15rem;
    font-weight: 400;
    margin-bottom: 3rem;
    opacity: 0.9;
}

.poem-body {
    text-align: center;
}

.poem-heading {
    font-size: 1.4rem;
    font-weight: 300;
    letter-spacing: 0.07rem;
    margin-bottom: 2.5rem;
    color: #111;
}

.poem-text {
    font-size: 1.25rem;
    line-height: 2.2rem;
    font-weight: 300;
    opacity: 0.9;
    color: #222;
    letter-spacing: 0.01rem;
}

/* VIDEO PAGE ------------------------------------------------------- */

.video-wrapper {
    max-width: 750px;
    margin: 4rem auto 6rem;
    padding: 0 1.5rem;
    position: relative;
    text-align: center;
}

.video-title {
    text-align: center;
    color: #1577A3;
    font-size: 1.3rem;
    letter-spacing: 0.15rem;
    font-weight: 400;
    margin-bottom: 3rem;
    opacity: 0.9;
}

.video-container {
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: center;
}

video {
    width: 100%;
    max-width: 750px;
    border-radius: 6px;
}

.vid-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 3rem;
    color: #1577A3;
    opacity: 0.5;
    cursor: pointer;
    transition: 0.3s ease;
}

.vid-arrow:hover {
    opacity: 1;
}

.vid-arrow.left {
    left: -3.5rem;
}

.vid-arrow.right {
    right: -3.5rem;
}

/* FADE EFFECT */
.fade {
    animation: fadeIn 0.6s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(7px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* VIDEO TITLES ----------------------------------------------------- */

.video-title-dynamic {
    margin-top: 1.5rem;
    font-size: 1.15rem;
    font-weight: 300;
    color: #1577A3;
    /* Miyako blue */
    letter-spacing: 0.08rem;
    opacity: 0.85;
    text-align: center;
}

.poster-subtitle {
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--miyako-blue);
    letter-spacing: 0.06rem;
    margin-bottom: 1.2rem;
    margin-top: 1.5rem;
}

.modal-title {
    margin-top: 1rem;
    font-size: 1.25rem;
    font-weight: 300;
    color: #A7D9EA; /* soft miyako sky blue */
    letter-spacing: 0.08rem;
    opacity: 0.95;
    text-shadow: 0px 0px 4px rgba(0,0,0,0.4);
}

.modal-overlay {
    background: rgba(10, 10, 10, 0.82);
}