/* Base Reset & Variables - Phase 1.5 */
:root {
    --bg-color: #FFFFFF;
    --text-main: #1A365D; /* Ocean Deep Navy */
    --text-muted: #5b6f8a;
    --accent-light: #F0F8FF;
    --accent-color: #3182CE;
    --font-heading: 'Cormorant Garamond', serif;
    --font-body: 'Noto Sans JP', sans-serif;
    --font-logo: 'Playfair Display', serif; /* New elegant font for logo */
    --spacing-unit: 1rem;
    --transition-speed: 0.4s;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-body);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
}

/* Typography */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 600; }
a { color: var(--text-main); text-decoration: none; transition: color var(--transition-speed); }
a:hover { color: var(--accent-color); }

/* Layout Classes */
.container { max-width: 1100px; margin: 0 auto; padding: 0 40px; }
.section { padding: 120px 0; }
.section-title {
    font-size: 2.2rem; text-align: center; margin-bottom: 4rem;
    letter-spacing: 0.15em; text-transform: uppercase; position: relative; color: var(--text-main);
}
.section-title::after {
    content: ''; display: block; width: 30px; height: 1px;
    background-color: var(--text-main); margin: 1.5rem auto 0;
}

/* Header & Nav */
.header {
    position: fixed; top: 0; left: 0; width: 100%; padding: 25px 50px;
    display: flex; justify-content: space-between; align-items: center;
    background-color: rgba(255, 255, 255, 0.98); backdrop-filter: blur(10px);
    z-index: 1000; transition: padding 0.3s ease;
}
.header.scrolled { padding: 15px 50px; box-shadow: 0 2px 10px rgba(0,0,0,0.03); }

/* Logo Image */
.logo a {
    display: flex;
    align-items: center;
}
.header-logo {
    height: 40px; /* Adjust height as needed */
    width: auto;
    filter: invert(1); /* If the image is white text on transparent, this makes it black for standard mode */
}
/* If header is transparent (not scrolled) and background is dark, we might need white logo.
   But user said "このpngを黒文字にして差し替えてください" (make it black text). 
   So assuming the hero bg is bright enough or the logo is permanently black.
   I'll just use invert(1) assuming the original PNG is white, or no filter if it's already black. 
   Assuming it's white to start with based on looking at it, I use invert. */
.header-logo {
    filter: brightness(0) invert(0); /* Force black */
}

/* Nav */
.nav-list { display: flex; list-style: none; gap: 40px; }
.nav-list a {
    font-family: var(--font-heading); font-size: 1.1rem;
    letter-spacing: 0.1em; text-transform: uppercase; position: relative;
}
.nav-list a::after {
    content: ''; position: absolute; bottom: -5px; left: 0;
    width: 0; height: 1px; background-color: var(--text-main); transition: width var(--transition-speed);
}
.nav-list a:hover::after { width: 100%; }

/* Mobile menu hidden for this iteration */
.mobile-menu-btn { display: none; }

/* Hero Section */
.hero {
    height: 100vh; display: flex; align-items: center; justify-content: center;
    text-align: center; position: relative; overflow: hidden;
}
.hero-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('https://images.unsplash.com/photo-1551025555-5dcab94017de?auto=format&fit=crop&w=2000&q=80');
    background-size: cover; background-position: center;
    opacity: 0.15; z-index: -1; filter: grayscale(30%);
}
.hero-title {
    font-size: 5rem; margin-bottom: 1rem; letter-spacing: 0.2em;
    color: var(--text-main); animation: fadeUp 1s ease 0.2s both;
}
.hero-subtitle {
    font-family: var(--font-body); font-size: 1.1rem; color: var(--text-muted);
    letter-spacing: 0.2em; animation: fadeUp 1s ease 0.4s both;
}

.scroll-indicator {
    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; animation: fadeUp 1s ease 0.6s both;
}
.scroll-indicator span { font-family: var(--font-heading); font-size: 0.8rem; letter-spacing: 0.2em; margin-bottom: 10px; }
.scroll-indicator .line { width: 1px; height: 60px; background-color: var(--text-main); position: relative; overflow: hidden; }
.scroll-indicator .line::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100%;
    background-color: white; animation: scrollLine 2s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
}
@keyframes scrollLine { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* About Section */
.about { background-color: #fafbfc; }
.about-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 60px; align-items: center; }
.about-image img { width: 100%; border-radius: 4px; box-shadow: 0 10px 30px rgba(26,54,93,0.05); }
.about-text h3 { font-size: 1.8rem; margin-bottom: 5px; letter-spacing: 0.1em; }
.about-role { font-family: var(--font-heading); color: var(--text-muted); font-size: 1.1rem; margin-bottom: 2rem; font-style: italic; }
.about-text p { margin-bottom: 1.5rem; color: #4a5568; }

/* Buttons */
.more-btn-container { margin-top: 2rem; }
.more-btn-container.center { text-align: center; margin-top: 4rem; }

.more-btn {
    display: inline-block;
    font-family: var(--font-heading);
    letter-spacing: 0.15em;
    font-size: 0.9rem;
    padding: 10px 0;
    position: relative;
    border-bottom: 1px solid var(--text-main);
}
.more-btn.outline {
    border: 1px solid var(--text-main);
    padding: 15px 40px;
    background: transparent;
    transition: all 0.3s ease;
}
.more-btn.outline:hover { background: var(--text-main); color: white; }
.more-btn.text-only { border: none; font-size: 0.85rem; }

.more-btn span { transition: transform 0.3s ease; display: inline-block; }
.more-btn:hover span { transform: translateX(5px); }

/* Portfolio Gallery */
.portfolio-desc { text-align: center; margin-bottom: 3rem; color: var(--text-muted); font-size: 0.95rem; }
.portfolio { padding-left: 0; padding-right: 0; }
.portfolio .container { max-width: 100%; padding: 0 0; }
.portfolio .section-title, .portfolio .portfolio-desc { padding: 0 40px; }
.portfolio .more-btn-container { padding: 0 40px; }
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin: 0 40px; /* 40px side margin */
}
.gallery-item { position: relative; overflow: hidden; cursor: pointer; background-color: #eee; min-height: 250px; aspect-ratio: 4/3;}
.gallery-item img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform;
}
.gallery-item:hover img { transform: scale(1.04); }
.gallery-overlay {
    position: absolute; bottom: 0; left: 0; right: 0; padding: 30px 20px 20px;
    background: linear-gradient(to top, rgba(26,54,93,0.7), transparent);
    color: white; opacity: 0; transition: opacity var(--transition-speed);
    pointer-events: none; display: flex; align-items: flex-end;
}
.gallery-overlay h4 {
    font-size: 1.2rem; font-weight: 400; letter-spacing: 0.05em;
    transform: translateY(10px); transition: transform var(--transition-speed);
}
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-item:hover .gallery-overlay h4 { transform: translateY(0); }

/* Journal/News List (Top View) */
.news-list { max-width: 800px; margin: 0 auto; border-top: 1px solid #e2e8f0; }
.news-item {
    display: flex; gap: 30px; padding: 25px 10px; border-bottom: 1px solid #e2e8f0;
    align-items: center; transition: background-color 0.3s;
}
.news-item:hover { background-color: white; }
.news-item time {
    font-family: var(--font-heading); font-size: 1.1rem;
    color: var(--text-muted); min-width: 100px;
}
.news-item a { flex: 1; font-size: 0.95rem; line-height: 1.6; }


/* Lightbox Modal - Modified for FULLSCREEN */
.lightbox {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(10, 15, 25, 0.98); /* Much darker background to pop the photo */
    display: flex; justify-content: center; align-items: center;
    z-index: 2000; opacity: 0; pointer-events: none; transition: opacity 0.4s ease;
}
.lightbox.active { opacity: 1; pointer-events: auto; }

/* The image fills up to 95% of screen.
   width/height are explicitly set so object-fit:contain works correctly
   for BOTH landscape and portrait images - no cropping ever occurs. */
.lightbox img {
    width: 90vw;
    height: 90vh;
    object-fit: contain;
    transform: scale(0.95);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: block;
}
.lightbox.active img { transform: scale(1); }

/* Close button - Make it white and clearly visible over dark BG */
.lightbox-close {
    position: absolute; top: 20px; right: 30px;
    font-size: 3rem; font-weight: 300; cursor: pointer;
    color: rgba(255,255,255,0.7);
    transition: transform var(--transition-speed), color 0.3s;
    z-index: 2001; /* Ensure its above the image */
}
.lightbox-close:hover { transform: rotate(90deg); color: white; }


/* Contact Entry Section */
.contact-card {
    background: transparent; /* No background */
    padding: 60px 20px; text-align: center;
    max-width: 800px; margin: 0 auto;
    /* Removed box-shadow and border */
    border: none;
    box-shadow: none;
}
.contact-intro { font-size: 1rem; color: #4a5568; margin-bottom: 40px; line-height: 1.8; }
.primary-btn {
    display: inline-block; background-color: var(--text-main); color: white;
    padding: 16px 50px; font-family: var(--font-heading); font-size: 1.1rem;
    letter-spacing: 0.15em; border-radius: 2px; transition: background-color 0.3s;
}
.primary-btn:hover { background-color: #0f1f38; color: white;}

/* Footer Updates */
.footer { padding: 60px 0 40px; text-align: center; background-color: #fafbfc; border-top: 1px solid #eee; }
.footer-inline-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 35px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}
/* Footer link with icon + text */
.social-link-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-main); /* Same color as nav */
    font-family: var(--font-heading);
    font-size: 1rem;
    letter-spacing: 0.08em;
    transition: color 0.3s, transform 0.3s;
}
.social-link-label:hover {
    color: var(--accent-color);
    transform: translateY(-2px);
}
.social-link-label svg { flex-shrink: 0; }

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    transition: color 0.3s, transform 0.3s;
}
.social-icon:hover {
    color: var(--accent-color);
    transform: translateY(-2px);
}
.text-link { font-size: 1rem; color: var(--text-main); letter-spacing: 0.08em; font-family: var(--font-heading);}
.text-link:hover { color: var(--accent-color); }

.copyright { font-family: var(--font-heading); font-size: 0.9rem; letter-spacing: 0.1em; color: var(--text-muted); margin-top: 10px;}

/* Fade in animation classes */
.fade-in { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* Responsive adjustments */
@media (max-width: 768px) {
    .header { padding: 20px; }
    .nav { display: none; }
    .about-grid { grid-template-columns: 1fr; }
    .gallery-grid { grid-template-columns: 1fr; }
    .gallery-item.large, .gallery-item.tall { grid-column: auto; grid-row: auto; }
    .news-item { flex-direction: column; align-items: flex-start; gap: 10px; }
}