:root {
    --bg-color: #ffffff;
    --text-color: #111111;
    --link-color: #333333;
    --hover-color: #666666;
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    --max-width: 1000px;
    --spacing: 2rem;
}

/* Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-main);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--link-color);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease, color 0.2s ease;
}

a:hover {
    color: var(--hover-color);
    border-bottom-color: var(--hover-color);
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing);
    display: block; /* Removed flex from container */
    /* flex-direction: column; min-height: 100vh; Removed */
    width: 100%;
}

.site-main {
    min-height: calc(100vh - 200px); /* Rough min-height to push footer down */
}

/* Header */
.site-header {
    width: 100%;
    margin-bottom: calc(var(--spacing) * 2);
    /* Flex is handled by header-inner */
}

.header-inner {
    padding: calc(var(--spacing) * 2) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Hugo Porto Hero Style Recreation - Full Width Support */
.hugo-porto-hero {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 3rem;
    font-family: 'Poppins', sans-serif;
    /* Removed padding to allow full width for text if desired, but keeping minimal padding for mobile */
    padding: 0 1rem;
    max-width: 1000px; /* Limit max width for hero to reasonable size */
    margin-left: auto;
    margin-right: auto;
}

/* Ensure other content is constrained */
.posts-list, .posts-list-page, .post, .homepage-content-wrapper {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing);
}

.services-section, .testimonials-section {
    /* These were margin-bottom only. Now need to be centered */
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--spacing);
    margin-bottom: calc(var(--spacing) * 3);
}

/* Override previous site-header styles */
/*
.site-header {
    padding: calc(var(--spacing) * 2) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: calc(var(--spacing) * 2);
}
*/

.site-title {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: none;
}

.site-nav {
    display: flex;
    gap: var(--spacing);
}

.site-nav a {
    font-size: 0.95rem;
    color: var(--text-color);
    opacity: 0.7;
}

.site-nav a:hover {
    opacity: 1;
    border-bottom: none;
}

/* Main Content */
.site-main {
    flex: 1;
}

/* Typography & Layout */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1rem;
    line-height: 1.2;
    font-weight: 600;
}

p {
    margin-bottom: 1.5rem;
}

ul, ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

/* Homepage */
.homepage-hero {
    margin-bottom: calc(var(--spacing) * 3);
}

.hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.hero-bio {
    font-size: 1.25rem;
    color: #555;
    max-width: 600px;
}

/* Post Lists */
.posts-list ul {
    list-style: none;
    padding: 0;
}

.posts-list li {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.5rem;
}

.posts-list a {
    font-weight: 500;
    font-size: 1.1rem;
    color: var(--text-color);
    border-bottom: none;
}

.post-date {
    font-size: 0.9rem;
    color: #888;
    font-family: var(--font-mono);
    white-space: nowrap;
    margin-left: 1rem;
}

/* Single Post */
.post-header {
    margin-bottom: calc(var(--spacing) * 2);
    text-align: left; /* Keep left aligned for consistency */
}

.post-title {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.post-content {
    font-size: 1.1rem;
}

.post-content h2 {
    margin-top: 2rem;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 1.5rem 0;
}

.post-content code {
    background: #f4f4f4;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 0.9em;
}

.post-content pre {
    background: #f4f4f4;
    padding: 1rem;
    overflow-x: auto;
    border-radius: 4px;
    margin-bottom: 1.5rem;
}

.post-content pre code {
    background: none;
    padding: 0;
}

.post-content blockquote {
    border-left: 4px solid #eee;
    padding-left: 1rem;
    color: #666;
    font-style: italic;
    margin: 1.5rem 0;
}

/* Footer */
/* Hugo Porto Hero Style Recreation (Duplicate removed) */

.hero-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    width: 100%;
}

@media (max-width: 768px) {
    .hero-row {
        flex-direction: column;
        text-align: center;
    }
}

.hero-big-text {
    font-size: 5rem; /* text-7xl equivalent roughly */
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    margin: 0;
}

@media (min-width: 1024px) {
    .hero-big-text {
        font-size: 7rem; /* lg:text-8xl */
    }
}

@media (min-width: 1280px) {
    .hero-big-text {
        font-size: 8rem; /* xl:text-9xl */
    }
}

@media (max-width: 640px) {
    .hero-big-text {
        font-size: 3.5rem; /* text-5xl */
    }
}

.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }

.text-gray-400 { color: #9ca3af; }
.text-gray-600 { color: #4b5563; }
.text-outline {
    color: transparent;
    -webkit-text-stroke: 2px #d1d5db; /* gray-300 */
}

/* Adjust order on mobile to match the design (Text then Title or vice versa?) 
   The original design:
   Row 1: Title (Left) + Text
   Row 2: Avatar + Title (Right)
   Row 3: Text + Title (Right)
*/

.hero-desc-text {
    font-size: 1rem; /* text-lg */
    font-weight: 300; /* font-light */
    max-width: 500px;
    padding: 0 2rem;
}

@media (min-width: 1280px) {
    .hero-desc-text {
        font-size: 1.125rem; /* xl:text-xl */
    }
}

.center-row {
    justify-content: center;
    gap: 2rem;
}

.hero-avatar {
    width: 7rem; /* w-28 */
    height: 7rem;
    border-radius: 9999px; /* rounded-full */
    object-fit: cover;
}

@media (min-width: 1280px) {
    .hero-avatar {
        width: 9rem; /* xl:w-36 */
        height: 9rem;
    }
}

/* Specific alignments per row to match hugo-porto */
/* Row 1: Title Left, Text Right/Center */
.hero-row:nth-child(1) {
    justify-content: flex-start;
}
.hero-row:nth-child(1) .hero-desc-text {
    margin-left: auto;
}

/* Row 2: Avatar Left/Center, Title Right/Center */
.hero-row:nth-child(2) {
    justify-content: center;
}
/* For Row 2, we want image then title. Flex default is row, so it works. */

/* Row 3: Text Left/Center, Title Right */
.hero-row:nth-child(3) {
    justify-content: flex-end;
}
.hero-row:nth-child(3) .hero-desc-text {
    margin-right: auto;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .hero-row:nth-child(1) {
        flex-direction: column;
    }
    .hero-row:nth-child(2) {
        flex-direction: column;
    }
    .hero-row:nth-child(3) {
        flex-direction: column-reverse; /* Text then Title -> Title then Text? 
           Original code:
           Row 3: Text then Title.
           On mobile: stack vertically.
           The code has: <div text>...</div> <div title>...</div>
           So Text is on top of Title in code.
           Flex-col puts Text on top.
        */
        flex-direction: column; 
    }
    
    .hero-desc-text {
        text-align: center;
        margin: 1rem 0;
        padding: 0 1rem;
    }

    .text-left, .text-right {
        text-align: center;
    }
    
    .hero-row:nth-child(1) .hero-desc-text { margin-left: 0; }
    .hero-row:nth-child(3) .hero-desc-text { margin-right: 0; }
}

.services-section h2, .testimonials-section h2 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--text-color);
    display: inline-block;
}

/* Grids */
.services-grid, .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.service-item, .testimonial-item {
    background: #f9f9f9;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #eee;
}

.service-item h3 {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.service-item p {
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.testimonial-item blockquote {
    font-style: italic;
    color: #555;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.testimonial-item cite {
    display: block;
    font-style: normal;
    font-weight: 600;
    font-size: 0.85rem;
    text-align: right;
}

/* Hero */
.homepage-hero {
    text-align: center;
    margin-bottom: 3rem;
}

.hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.hero-subtitle {
    font-size: 1.5rem;
    color: #666;
    margin-bottom: 1.5rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.hero-bio {
    font-size: 1.1rem;
    max-width: 650px;
    margin: 0 auto 1.5rem;
    line-height: 1.6;
}

/* Resume */
.resume-section {
    margin-top: 3rem;
}

.resume-section h2 {
    border-bottom: 2px solid #eee;
    padding-bottom: 0.5rem;
    margin-bottom: 2rem;
}

.resume-item {
    margin-bottom: 2.5rem;
}

.resume-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.5rem;
}

.resume-header h3 {
    font-size: 1.25rem;
    margin-bottom: 0;
}

.resume-header .at {
    color: #888;
    font-weight: 400;
}

.resume-date {
    font-family: var(--font-mono);
    color: #666;
    font-size: 0.9rem;
    white-space: nowrap;
}

.resume-details {
    list-style: disc;
    padding-left: 1.5rem;
    margin-bottom: 0;
}

.resume-details li {
    margin-bottom: 0.5rem;
    color: #333;
}

/* Footer */
.site-footer {
    padding: calc(var(--spacing) * 2) 0;
    margin-top: calc(var(--spacing) * 4);
    border-top: 1px solid #eee;
    text-align: center;
    color: #888;
    font-size: 0.9rem;
}


/* Sections (Restored) */
.services-section, .testimonials-section {
    max-width: var(--max-width);
    margin: 0 auto calc(var(--spacing) * 3) auto;
    padding: 0 var(--spacing);
}

.services-section h2, .testimonials-section h2 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--text-color);
    display: inline-block;
}

/* Old Hero (Removed as it is replaced by Hugo Porto Hero Style) */
/* .homepage-hero, .hero-title, .hero-subtitle, .hero-bio removed/commented */

.resume-section {
    max-width: var(--max-width);
    margin: 3rem auto;
    padding: 0 var(--spacing);
}

/* About Section */
.about-section {
    max-width: var(--max-width);
    margin: 0 auto calc(var(--spacing) * 3) auto;
    padding: 0 var(--spacing);
}

.about-section h2 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--text-color);
    display: inline-block;
}

.about-section h3 {
    font-size: 1.25rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.about-section ul {
    list-style: disc;
    margin-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.about-section li {
    margin-bottom: 0.5rem;
}

/* Experience Section (Hugo Porto Style) */
.experience-title {
    font-family: 'Poppins', sans-serif;
    font-size: 2.5rem; /* text-4xl */
    font-weight: 500; /* font-medium */
    color: #9ca3af; /* text-gray-400 */
    text-align: center;
    margin-bottom: 3rem; /* mt-12 approx */
    text-transform: uppercase;
    border-bottom: none !important; /* Override default h2 border */
}

@media (min-width: 768px) {
    .experience-title {
        font-size: 3rem; /* md:text-5xl */
    }
}

@media (min-width: 1024px) {
    .experience-title {
        font-size: 4.5rem; /* lg:text-7xl */
    }
}

.experience-timeline {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 3rem auto 0;
    display: flex;
    flex-direction: column;
    color: #4b5563; /* text-gray-600 */
}

/* Vertical Line */
.experience-line {
    display: none; /* hidden on mobile */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 25%; /* left-1/4 */
    margin-left: 2.5rem; /* ml-10 */
    width: 2px; /* w-0.5 */
    background-color: #d1d5db; /* bg-gray-300 */
}

@media (min-width: 768px) {
    .experience-line {
        display: block;
    }
}

/* Experience Item */
.experience-item {
    display: flex;
    flex-direction: column;
    margin-top: 2rem; /* mt-8 */
    text-align: center;
}

@media (min-width: 768px) {
    .experience-item {
        flex-direction: row;
        text-align: left;
    }
}

/* Left Column (Company) */
.experience-left {
    width: 100%;
}

@media (min-width: 768px) {
    .experience-left {
        width: 25%; /* md:w-1/4 */
    }
}

.experience-company {
    font-weight: 300; /* font-light */
    font-size: 1.875rem; /* text-3xl */
    display: flex;
    justify-content: center;
}

@media (min-width: 768px) {
    .experience-company {
        justify-content: flex-start;
    }
}

/* Right Column (Content) */
.experience-right {
    width: 100%;
    position: relative;
    display: flex;
    margin-top: 0.5rem;
}

@media (min-width: 768px) {
    .experience-right {
        width: 75%; /* md:w-3/4 */
        padding-left: 4rem; /* md:pl-16 */
        margin-top: 0;
    }
}

/* Dot on Timeline */
.experience-dot {
    display: none;
    position: absolute;
    left: 1.75rem; /* left-7 */
    top: 0.25rem; /* top-1 */
    width: 1.5rem; /* h-6 w-6 */
    height: 1.5rem;
    border-radius: 9999px; /* rounded-full */
    border: 2px solid #d1d5db; /* border-gray-300 */
    background-color: #ffffff; /* bg-white */
    z-index: 10;
}

@media (min-width: 768px) {
    .experience-dot {
        display: block;
    }
}

/* Content Details */
.experience-content {
    display: flex;
    flex-direction: column;
    width: 100%;
}

@media (min-width: 768px) {
    .experience-content {
        margin-top: -0.25rem; /* md:-mt-1 to align with dot */
        padding-left: 4rem; /* md:pl-16 nested padding? Check source. Yes: md:pl-16 on inner div */
    }
}

.experience-date {
    display: block;
    font-weight: 600; /* font-semibold */
    margin-bottom: 0.5rem;
}

.experience-role {
    display: block;
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    font-family: 'Poppins', sans-serif; /* font-header assumed to be Poppins */
    margin-bottom: 0.5rem;
    color: var(--text-color);
}

.experience-text {
    font-size: 1.1rem; /* text-xl approx */
    font-weight: 300; /* font-light */
    line-height: 1.6;
}

.experience-text p {
    margin-bottom: 1rem; /* py-2 */
}

/* Education Title Style (Matching Experience Title roughly but smaller if needed, or keeping default h2) */
.education-title {
    text-align: center;
    margin-top: 4rem;
    margin-bottom: 2rem;
    font-size: 2rem;
    border-bottom: 2px solid #eee;
    display: inline-block;
    /* Resetting from experience-title if we reused class, but we didn't */
}

/* Ensure resume-section has full width handling if needed, but it's inside .container */
/* The .container is 800px max-width usually. 
   Wait, Hugo Porto Experience section is likely intended to be wider?
   The source has `max-w-7xl` or similar usually for sections.
   Our container is 800px. This split layout (25/75) might look cramped in 800px.
   Let's check if we should allow it to be wider.
   However, modifying container width might break other things.
   For now, I'll stick to container width. 800px is tight for 25/75 split (200px/600px).
   Maybe I should allow resume-section to break out or be wider?
   The user asked to "Update rendering", implying style.
   If I look at Hugo Porto screenshot, it's quite wide.
   I'll try to fit it in 800px first.
*/

/* Logo */
.site-logo {
    max-height: 40px; /* Ensure max-height for large images */
    width: auto;
    display: block;
}

.site-title {
    display: flex;
    align-items: center;
    /* If text fallback is used, existing styles apply. If img, these help alignment. */
}

.site-title-text {
    margin-left: 0.5rem;
}