:root {
    --text-main: #333333;
    --text-light: #666666;
    --bg-body: #f9f9f9;
    --bg-card: #ffffff;
    --primary: #2c3e50;
    /* Deep Blue - Trust */
    --accent: #e74c3c;
    /* Red - Passion/Energy for "Rebirth" */
    --border: #e0e0e0;
    --font-serif: "Noto SerifJP", serif;
    --font-sans: "Inter", "Noto Sans JP", sans-serif;
    --spacing-container: 1200px;
}

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

body {
    font-family: var(--font-sans);
    color: var(--text-main);
    background-color: var(--bg-body);
    line-height: 1.8;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s;
}

/* Header */
/* Header */
header {
    background-color: var(--bg-card);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

header .container {
    height: 50px;
}

.container {
    max-width: var(--spacing-container);
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--primary);
    letter-spacing: -0.02em;
}

.logo span {
    color: var(--accent);
}

nav ul {
    display: flex;
    gap: 2rem;
    list-style: none;
}

nav a {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-light);
}

nav a:hover {
    color: var(--primary);
}

/* Hero Section */
.hero {
    padding: 20px 0 2.5rem;
    /* Top reduced to 20px */
    text-align: center;
    background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
}

.hero h1 {
    font-family: var(--font-serif);
    font-size: 3.5rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.hero p {
    font-size: 1.25rem;
    color: var(--text-light);
    max-width: 600px;
    margin: 0 auto 1.5rem;
}

.btn {
    display: inline-block;
    padding: 0.8rem 2rem;
    background-color: var(--primary);
    color: #fff;
    border-radius: 4px;
    font-weight: 600;
    transition: transform 0.2s, background-color 0.2s;
}

.btn:hover {
    background-color: #1a252f;
    transform: translateY(-2px);
}

/* Manifesto Section */
.manifesto {
    padding: 2rem 0;
    background-color: var(--bg-card);
    scroll-margin-top: 70px;
}

.section-title {
    text-align: center;
    font-family: var(--font-serif);
    font-size: 2rem;
    margin-bottom: 1.5rem;
    /* Reduced from 3rem */
    color: var(--primary);
}

.manifesto-content {
    max-width: 700px;
    margin: 0 auto;
    font-size: 1.1rem;
    text-align: justify;
}

.manifesto-content p {
    margin-bottom: 1.5rem;
}

/* Projects Hub */
.projects {
    padding: 2rem 0 20px;
    /* Bottom reduced to 20px */
    scroll-margin-top: 70px;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 1rem;
    /* Reduced from 2rem */
}

.project-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.card-image {
    height: 80px;
    /* Aggressively reduced from 140px */
    background-color: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-size: 2.5rem;
    /* Reduced icon size */
    font-weight: bold;
}

.card-content {
    padding: 1.5rem;
    /* Reduced from 2rem */
}

.card-tag {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    display: block;
}

.card-title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--primary);
}

.card-desc {
    font-size: 0.95rem;
    color: var(--text-light);
    margin-bottom: 1.5rem;
}

.card-link {
    font-weight: 600;
    color: var(--primary);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}

.project-card:hover .card-link {
    border-bottom-color: var(--primary);
}

/* Footer */
footer {
    background-color: var(--primary);
    color: #fff;
    padding: 2rem 0;
    /* Reduced from 4rem */
    text-align: center;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
}

.footer-links a:hover {
    color: #fff;
}

.copyright {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .container {
        flex-direction: column;
        gap: 1rem;
    }

    .hero h1 {
        font-size: 2.5rem;
    }
}

/* Small Button for Hero */
.btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.0rem;
    background-color: #ffffff;
    color: var(--primary);
    border: 1px solid var(--border);
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: 600;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
    margin-bottom: 0.6rem;
}

.btn-sm:hover {
    background-color: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Progress styles */
.btn-sm.progress-active {
    background: linear-gradient(to right, #e0f2fe var(--progress), #ffffff var(--progress));
    /* Ensure border and text remain visible/readable */
    border-color: #cbd5e1;
}

.btn-sm.progress-active:hover {
    /* When hovering, we might want to keep the progress visible but darker, or override. 
       Let's override for now to keep the "button" feel, or we can make the gradient darker.
       User requested "progress bar feel", standard hover might hide it. 
       Let's keep the hover effect simple for now: slight darken? 
       Actually, standard hover (fill with primary) is fine for interaction feedback.
    */
    background: var(--primary);
    color: #fff;
}