:root {

    --bg-color: #f2f7f9;

    --accent-blue: #2c4a63;

    --white: #ffffff;

    --text-main: #1a1a1a;

    --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



::-webkit-scrollbar {

    width: 10px;

}



::-webkit-scrollbar-track {

    background: var(--bg-color);

}



::-webkit-scrollbar-thumb {

    background: var(--accent-blue);

    border-radius: 5px;

}



::-webkit-scrollbar-thumb:hover {

    background: var(--accent-blue);

}



body {

    background-color: var(--bg-color);

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

    color: var(--accent-blue);

    line-height: 1.6;

    overflow-x: hidden;

}



.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 40px;

}



.vertical-bg-text {

    position: fixed;

    right: 50px;

    top: 50%;

    transform: translateY(-50%);

    writing-mode: vertical-rl;

    font-size: 3.5rem;

    font-weight: 900;

    opacity: 0.07;

    letter-spacing: 1rem;

    pointer-events: none;

    z-index: 0;

}



nav {

    padding: 50px 75px;

    z-index: 100;

    position: relative;

}



.nav-content {

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

}



.nav-brand {

    font-weight: 900;

    letter-spacing: 5px;

    text-decoration: none;

    color: var(--accent-blue);

    font-size: 1.2rem;

    z-index: 101;

}



.nav-links {

    display: flex;

}



.nav-links a {

    text-decoration: none;

    color: var(--accent-blue);

    font-weight: bold;

    font-size: 0.75rem;

    letter-spacing: 2px;

    margin-left: 40px;

    text-transform: uppercase;

    transition: var(--transition);

}



.nav-links a:hover {

    opacity: 0.6;

}



.hamburger-btn {

    display: none; 

    cursor: pointer;

    width: 30px;

    height: 30px;

    z-index: 101;

}



.hamburger-btn img {

    width: 100%;

    height: auto;

    display: block;

}



.hero-content {

    display: flex;

    align-items: center;

    padding: 60px 0 120px 0;

    gap: 60px;

}



.hero-text { flex: 1.2; }



.label {

    font-size: 0.8rem;

    letter-spacing: 4px;

    text-transform: uppercase;

    opacity: 0.6;

}



.main-title {

    font-size: clamp(3.5rem, 8vw, 6.5rem);

    line-height: 0.85;

    font-weight: 900;

    letter-spacing: -3px;

    margin: 20px 0;

}



.jp-title {

    font-size: 1.8rem;

    letter-spacing: 10px;

    margin-bottom: 30px;

    font-weight: 300;

}



.divider {

    width: 60px;

    height: 4px;

    background: var(--accent-blue);

    margin-bottom: 30px;

}



.blurb {

    max-width: 400px;

    font-size: 1.1rem;

    margin-bottom: 40px;

    color: var(--text-main);

}



.btn-primary {

    display: inline-block;

    padding: 18px 40px;

    background-color: var(--accent-blue);

    color: var(--white);

    text-decoration: none;

    font-weight: bold;

    letter-spacing: 2px;

    font-size: 0.8rem;

    transition: var(--transition);

}



.btn-primary:hover {

    transform: translateY(-5px);

    box-shadow: 0 15px 30px rgba(44, 74, 99, 0.2);

}



.hero-image { flex: 1; }



.cover-wrapper {

    position: relative;

    box-shadow: 40px 40px 80px rgba(0,0,0,0.15);

    transition: var(--transition);

}



.cover-wrapper img {

    width: 100%;

    display: block;

}



.cover-wrapper:hover {

    transform: scale(1.02) rotate(-1deg);

}



.quote-section {

    background: var(--white);

    padding: 100px 0;

    text-align: center;

}



.quote {

    font-size: 2.2rem;

    font-weight: 300;

    max-width: 800px;

    margin: 0 auto 20px auto;

}



.source {

    font-weight: bold;

    letter-spacing: 3px;

    font-size: 0.8rem;

    opacity: 0.6;

}



.author-section, .collection-section {

    padding: 120px 0;

}



.author-grid, .collection-grid {

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.author-text h2, .collection-text h2 {

    letter-spacing: 5px;

    margin-bottom: 20px;

}



.author-text p, .collection-text p {

    max-width: 500px;

    font-size: 1.2rem;

    margin-bottom: 30px;

}



.kanji-deco {

    font-size: 5rem;

    font-weight: 900;

    line-height: 1;

    opacity: 0.1;

}



/* --- FOOTER --- */

footer {

    padding: 60px 0;

    border-top: 1px solid rgba(0,0,0,0.05);

}



.footer-content {

    display: flex;

    justify-content: space-between;

    font-size: 0.8rem;

    letter-spacing: 1px;

}



.socials a {

    text-decoration: none;

    color: var(--accent-blue);

    font-size: 1.2rem;

    margin-left: 20px;

    transition: var(--transition);

}



.socials a:hover { opacity: 0.6; }





@media (min-width: 800px) {

    .author-text p, .collection-text p {

        max-width: 800px;

    }

}



@media (max-width: 900px) {

    .hero-content {

        flex-direction: column-reverse;

        text-align: center;

    }

    .main-title { font-size: 4rem; }

    .divider { margin: 20px auto; }

    .blurb { margin: 20px auto 40px auto; }

    .vertical-bg-text { display: none; }

    .author-grid, .collection-grid { flex-direction: column; text-align: center; }

}



@media (max-width: 780px) {

    nav { padding: 25px 25px; }

    .footer-content {

        flex-direction: column;

        text-align: center;

        gap: 20px;

    }

}



@media (max-width: 680px) {

    .hamburger-btn { display: block; }



    .nav-links {

        display: none;

        width: 100%;

        flex-direction: column;

        align-items: center;

        background-color: var(--bg-color);

        padding: 20px 0;

        margin-top: 20px;

        border-top: 1px solid rgba(44, 74, 99, 0.1);

        animation: fadeIn 0.3s ease-in-out;

    }



    .nav-links.active { display: flex; }



    .nav-links a {

        margin: 15px 0;

        font-size: 1rem;

    }



    .author-text p, .collection-text p {

        max-width: 400px;

    }

}



@keyframes fadeIn {

    from { opacity: 0; transform: translateY(-10px); }

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

}