/* ==========================================================================
   1. CONFIGURATION & VARIABLES
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Noto+Serif+JP:wght@300;400;600&family=Fira+Code:wght@400;500&display=swap');

:root {
    /* --- COLOR PALETTE: Kachi-iro & Slate --- */
    --bg-base:          #181a1f;       /* Deep matte dark */
    --bg-panel:         #1e2126;       /* Slightly lighter for panels/code */
    --bg-highlight:     rgba(255, 255, 255, 0.05);
    
    --text-main:        #c0c5ce;       /* Off-white/Silver */
    --text-bright:      #e6e8eb;       /* Headings */
    --text-muted:       #6f7887;       /* Metadata/Footer */
    --text-faint:       rgba(111, 120, 135, 0.5); /* Decorative text */

    --accent-gold:      #d4af37;       /* Kintsugi Gold */
    --accent-red:       #8c2727;       /* Lacquer Red */
    
    --border-color:     rgba(255, 255, 255, 0.08);
    --border-hover:     rgba(212, 175, 55, 0.5); /* Gold fade */

    /* --- TYPOGRAPHY SCALE (Based on 16px root) --- */
    --font-sans:        'Inter', sans-serif;
    --font-serif:       'Noto Serif JP', serif;
    --font-mono:        'Fira Code', monospace;

    /* Readable Sizes: 
       xs: 12px, sm: 14px, base: 16px, lg: 18px, xl: 24px, 2xl: 30px */
    --text-xs:          0.55rem; 
    --text-sm:          0.675rem;
    --text-base:        0.8rem;
    --text-lg:          0.925rem;
    --text-xl:          1.3rem;
    --text-2xl:         1.675rem;
    --text-3xl:         2.05rem;

    /* --- SPACING & LAYOUT --- */
    --gap-standard:     40px;
    --gap-tight:        20px;
    --radius-sm:        4px;
    --radius-md:        8px;
    
    /* --- ANIMATION --- */
    --transition-fast:  0.2s ease;
    --transition-slow:  1.2s cubic-bezier(0.22, 1, 0.36, 1);

    /* --- SYNTAX HIGHLIGHTING (One Dark inspired) --- */
    --syntax-bg:        #121418;
    --syntax-gutter:    rgba(0, 0, 0, 0.2);
    --syntax-keyword:   #c678dd; /* Purple */
    --syntax-string:    #98c379; /* Green */
    --syntax-comment:   #5c6370; /* Grey */
    --syntax-func:      #61afef; /* Blue */
    --syntax-var:       #e06c75; /* Red */
    --syntax-class:     #e5c07b; /* Yellow */
}

/* ==========================================================================
   2. GLOBAL RESET & BASE
   ========================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background-color: var(--bg-base);
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 16px; /* Restored standard browser readability */
    line-height: 1.7;
    letter-spacing: 0.02em;
    -webkit-font-smoothing: antialiased;
    
    /* WABI-SABI NOISE TEXTURE */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
    background-attachment: fixed; /* Keeps texture stable during scroll */
}

a { 
    color: inherit; 
    text-decoration: none; 
    transition: var(--transition-fast); 
    border-bottom: 1px dotted var(--text-muted); 
}
a:hover { 
    color: var(--accent-gold); 
    border-bottom-color: var(--accent-gold); 
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    font-weight: 400;
    color: var(--text-bright);
    margin-bottom: 1rem;
}

/* ==========================================================================
   3. LAYOUT GRID
   ========================================================================== */
.container {
    max-width: 100%;
    display: grid;
    /* Sidebar: 280px fixed, Main: Rest of space */
    grid-template-columns: 280px minmax(0, 1fr);
    min-height: 100vh;
}

/* ==========================================================================
   4. LEFT SIDEBAR (Personal Info)
   ========================================================================== */
aside.sidebar {
    padding: 60px 40px;
    border-right: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: rgba(24, 26, 31, 0.95); /* Slight contrast */
}

.profile-intro h1 {
    font-size: var(--text-xl); /* ~24px */
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.profile-intro .jp-name {
    font-size: var(--text-sm); /* ~14px */
    color: var(--text-muted);
    font-family: var(--font-serif);
    margin-bottom: 2.5rem;
    display: block;
}

.info-block {
    margin-bottom: 2rem;
    font-size: var(--text-sm);
}

.info-label {
    display: block;
    color: var(--text-muted);
    font-size: var(--text-xs); /* ~12px */
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}

.contact-list li {
    list-style: none;
    margin-bottom: 0.5rem;
    font-size: var(--text-sm);
}

/* Vertical Japanese Text Decoration */
.vertical-deco {
    position: absolute;
    right: 20px;
    top: 60px;
    writing-mode: vertical-rl;
    color: var(--text-faint);
    font-family: var(--font-serif);
    letter-spacing: 0.5em;
    user-select: none;
    pointer-events: none;
}

/* ==========================================================================
   5. RIGHT MAIN CONTENT
   ========================================================================== */
main.main-content {
    padding: 60px 8% 80px 5%;
    width: 100%;
    max-width: 1400px; /* Prevent stretching on ultrawide monitors */
}

/* Section Dividers */
.section-title {
    font-size: var(--text-lg);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    margin-bottom: 40px;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.section-title span.jp { font-size: var(--text-xs); opacity: 0.6; }

/* --- CV / Timeline Items --- */
.cv-item {
    display: grid;
    grid-template-columns: 140px 1fr; /* Fixed width for date */
    gap: var(--gap-tight);
    margin-bottom: 45px;
    opacity: 0.9;
    transition: opacity 0.3s;
}

.cv-item:hover { opacity: 1; }

.cv-date {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-align: right;
    font-family: var(--font-serif);
    padding-top: 5px;
    line-height: 1.4;
}

.cv-content h3 {
    font-size: var(--text-lg);
    margin-bottom: 0.25rem;
    color: var(--text-bright);
}

.cv-content .role {
    font-size: var(--text-sm);
    color: var(--accent-gold);
    margin-bottom: 1rem;
    font-style: italic;
    font-family: var(--font-serif);
    display: block;
}

.cv-content p {
    font-size: var(--text-base); /* Readable paragraph size */
    margin-bottom: 0.5rem;
    text-align: justify;
    color: var(--text-main);
}

/* ==========================================================================
   6. BLOG POST LAYOUT
   ========================================================================== */
.post-container {
    display: flex;
    gap: 60px;
    position: relative;
    width: 100%;
}

.blog-article {
    max-width: 760px; /* Optimal reading width (approx 75 chars) */
    flex: 1;
    min-width: 0;
}

.post-header {
    margin-bottom: 50px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 30px;
}

.post-meta {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--accent-gold);
    margin-bottom: 1rem;
    display: block;
}

.post-title {
    font-size: var(--text-3xl);
    line-height: 1.3;
    color: var(--text-bright);
}

/* ==========================================================================
   7. MARKDOWN CONTENT STYLE (Typography heavy)
   ========================================================================== */
.markdown-body {
    font-size: var(--text-base);
    color: var(--text-main);
    line-height: 1.8;
}

/* Headings in Markdown */
.markdown-body h1 { font-size: var(--text-2xl); margin: 3rem 0 1.5rem; text-align: center; }

/* H2: Section Divider */
.markdown-body h2 {
    margin-top: 4rem;
    margin-bottom: 2rem;
    font-size: var(--text-xl);
    font-weight: 600;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
    position: relative;
}
.markdown-body h2::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 60px;
    height: 2px;
    background-color: var(--accent-gold);
}

/* H3: Topic Block */
.markdown-body h3 {
    margin-top: 3rem;
    font-size: var(--text-lg);
    color: var(--accent-gold);
    padding-left: 1rem;
    border-left: 3px solid var(--accent-gold);
}

/* H4: Sub-point */
.markdown-body h4 {
    margin-top: 2rem;
    font-size: var(--text-base);
    font-weight: 600;
    position: relative;
    padding-left: 1.2rem;
}
.markdown-body h4::before {
    content: '#';
    position: absolute; left: 0;
    color: var(--accent-gold);
    opacity: 0.7;
}

/* Body Text & Lists */
.markdown-body p, .markdown-body ul, .markdown-body ol {
    margin-bottom: 1.5rem;
}
.markdown-body ul, .markdown-body ol { padding-left: 1.5rem; }
.markdown-body li { margin-bottom: 0.5rem; padding-left: 0.5rem; }
.markdown-body li::marker { color: var(--accent-gold); }

/* Blockquotes */
.markdown-body blockquote {
    border-left: 3px solid var(--accent-gold);
    margin: 2rem 0;
    padding: 1rem 1.5rem;
    background: var(--bg-highlight);
    color: var(--text-bright);
    font-family: var(--font-serif);
    font-style: italic;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Images */
.markdown-body img {
    max-width: 100%;
    border-radius: var(--radius-sm);
    display: block;
    margin: 3rem auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* ==========================================================================
   8. CODE BLOCKS (STABILIZED)
   ========================================================================== */
.markdown-body figure.highlight {
    background: var(--syntax-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin: 2.5rem 0;
    width: 100%;
    overflow-x: auto;
    font-family: var(--font-mono);
}

.markdown-body figure.highlight table {
    width: 100%;
    border-collapse: collapse;
    border: 0;
}

/* Common font settings for Gutter and Code to ensure alignment */
.markdown-body figure.highlight .gutter pre, 
.markdown-body figure.highlight .code pre {
    font-family: var(--font-mono) !important;
    font-size: 0.9rem !important; /* Fixed readable code size */
    line-height: 1.6 !important;
    font-weight: normal;
    font-style: normal;
    padding: 12px 0;
}

/* Gutter (Line Numbers) */
.markdown-body figure.highlight .gutter {
    width: 50px;
    background: var(--syntax-gutter);
    border-right: 1px solid var(--border-color);
    user-select: none;
    vertical-align: top;
}
.markdown-body figure.highlight .gutter pre {
    color: var(--text-muted);
    text-align: right;
    padding-right: 12px;
    opacity: 0.6;
}

/* Code Content */
.markdown-body figure.highlight .code {
    vertical-align: top;
    padding: 0 15px;
    width: 100%;
}
.markdown-body figure.highlight pre {
    margin: 0;
    border: none;
    overflow: visible;
    white-space: pre;
}

/* Syntax Highlighting Mapping */
.markdown-body figure.highlight .keyword { color: var(--syntax-keyword); font-weight: 700; }
.markdown-body figure.highlight .string { color: var(--syntax-string); }
.markdown-body figure.highlight .comment { color: var(--syntax-comment); font-style: italic; }
.markdown-body figure.highlight .function { color: var(--syntax-func); }
.markdown-body figure.highlight .title { color: var(--syntax-class); }
.markdown-body figure.highlight .variable { color: var(--syntax-var); }

/* ==========================================================================
   9. TABLE OF CONTENTS (TOC)
   ========================================================================== */
aside.post-toc {
    width: 240px;
    flex-shrink: 0;
    margin-left: auto;
}

.toc-wrapper {
    position: sticky;
    top: 100px;
    border-left: 1px solid var(--border-color);
    max-height: 70vh;
    overflow-y: auto;
    padding-left: 20px;
    opacity: 0.5;
    transition: opacity 0.3s;
}

.toc-wrapper:hover { opacity: 1; }

.toc-header {
    font-size: var(--text-xs);
    color: var(--text-muted);
    letter-spacing: 0.15em;
    margin-bottom: 1rem;
    text-transform: uppercase;
    font-weight: 600;
}

.toc-wrapper ol { list-style: none; padding: 0; margin: 0; }
.toc-wrapper .toc-item { margin-bottom: 0.5rem; line-height: 1.4; }

.toc-wrapper .toc-link {
    font-size: var(--text-xs);
    color: var(--text-muted);
    border: none;
    display: block;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
}

.toc-wrapper .toc-link:hover,
.toc-wrapper .toc-link.active {
    color: var(--accent-gold);
    transform: translateX(5px);
}

.toc-wrapper .toc-child {
    padding-left: 12px;
    margin-top: 0.5rem;
    border-left: 1px solid var(--bg-highlight);
}

/* ==========================================================================
   10. FOOTER & PAGINATION
   ========================================================================== */
footer.footer {
    margin-top: 80px;
    border-top: 1px solid var(--border-color);
    padding: 30px 20px;
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-align: center;
}

.pagination {
    display: flex;
    justify-content: center;
    margin-top: 4rem;
    gap: 10px;
}

.pagination .page-number, 
.pagination .extend {
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    transition: all 0.3s;
    font-family: var(--font-serif);
    font-size: var(--text-sm);
}

.pagination .page-number:hover,
.pagination .extend:hover,
.pagination .current {
    background-color: var(--text-bright);
    color: var(--bg-base);
    border-color: var(--text-bright);
}

/* ==========================================================================
   11. RESPONSIVE DESIGN
   ========================================================================== */
@media (max-width: 1200px) {
    .container { grid-template-columns: 260px 1fr; }
    aside.post-toc { display: none; } /* Hide TOC on medium screens */
    .blog-article { max-width: 100%; }
}

@media (max-width: 768px) {
    .container { grid-template-columns: 1fr; }
    
    aside.sidebar { 
        height: auto; 
        position: relative; 
        border-right: none; 
        border-bottom: 1px solid var(--border-color);
        padding: 40px 20px;
        text-align: center;
    }

    /* Adjust header for mobile */
    .vertical-deco { display: none; }
    
    main.main-content { padding: 40px 20px; }
    
    .cv-item { 
        grid-template-columns: 1fr; 
        gap: 5px; 
    }
    
    .cv-date { 
        text-align: left; 
        color: var(--accent-gold); 
        margin-bottom: 5px;
    }

    .post-title { font-size: var(--text-2xl); }
    
    /* Full width code blocks on mobile */
    .markdown-body figure.highlight {
        margin-left: -20px; 
        width: calc(100% + 40px);
        border-radius: 0;
        border-left: none; border-right: none;
    }
}