@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Mono:wght@400;500;600&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Light theme colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-tertiary: #e5e7eb;
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-tertiary: #9ca3af;
    --accent-primary: #2563eb;
    --accent-secondary: #3b82f6;
    --accent-tertiary: #fbbf24;
    --border-color: #e5e7eb;
    --shadow-light: rgba(0, 0, 0, 0.1);
    --shadow-medium: rgba(0, 0, 0, 0.15);
    --navbar-bg: rgba(255, 255, 255, 0.95);
    --navbar-shadow: rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] {
    /* Dark theme colors */
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --bg-tertiary: #374151;
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --text-tertiary: #9ca3af;
    --accent-primary: #3b82f6;
    --accent-secondary: #60a5fa;
    --accent-tertiary: #fbbf24;
    --border-color: #374151;
    --shadow-light: rgba(0, 0, 0, 0.3);
    --shadow-medium: rgba(0, 0, 0, 0.4);
    --navbar-bg: rgba(17, 24, 39, 0.95);
    --navbar-shadow: rgba(0, 0, 0, 0.3);
}

html {
    font-size: 103.125%;
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

body,
body * {
    text-align: justify !important;
    text-justify: inter-word;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: var(--navbar-bg);
    backdrop-filter: blur(10px);
    z-index: 1000;
    transition: all 0.3s ease;
    border-bottom: 1px solid var(--border-color);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}

.nav-logo a {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--accent-primary);
    text-decoration: none;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
    align-items: center;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.nav-style-picker {
    position: relative;
}

.style-select {
    min-width: 126px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: linear-gradient(145deg, var(--bg-secondary), var(--bg-primary));
    color: var(--text-primary);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0 2.2rem 0 0.8rem;
    appearance: none;
    color-scheme: light dark;
    cursor: pointer;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.nav-style-picker::after {
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 0.78rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    pointer-events: none;
    font-size: 0.8rem;
}

.style-select:hover,
.style-select:focus {
    border-color: var(--accent-secondary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(20, 143, 134, 0.18);
}

.style-select option {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: inherit;
}

.style-select option:checked {
    background: var(--accent-primary);
    color: #ffffff;
}

body[data-style="minimal"] .style-select option {
    text-transform: none;
    letter-spacing: 0.01em;
}

body[data-style="technical"] .style-select option {
    font-family: 'IBM Plex Mono', Consolas, monospace;
}

body[data-style="editorial"] .style-select option,
body:not([data-style]) .style-select option {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
}

body[data-style="minimal"][data-theme="dark"] .style-select option:checked,
body[data-style="technical"][data-theme="dark"] .style-select option:checked {
    color: #0b111a;
}

.nav-link {
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: var(--accent-primary);
}

.theme-toggle {
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    color: var(--text-primary);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.theme-toggle:hover {
    background: var(--accent-primary);
    color: var(--bg-primary);
    border-color: var(--accent-primary);
    transform: scale(1.1);
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.bar {
    width: 25px;
    height: 3px;
    background: #333;
    margin: 3px 0;
    transition: 0.3s;
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--accent-primary) 0%, #764ba2 100%);
    color: white;
    position: relative;
    overflow: hidden;
}

.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hero-name {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    opacity: 0;
    animation: fadeInUp 1s ease 0.2s forwards;
}

.hero-title {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 1rem;
    opacity: 0;
    animation: fadeInUp 1s ease 0.4s forwards;
}

.typewriter-container {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0;
    animation: fadeInUp 1s ease 0.6s forwards;
}

.typewriter {
    color: #fbbf24;
    font-weight: 600;
}

.cursor {
    animation: blink 1s infinite;
}

.hero-description {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    opacity: 0.9;
    opacity: 0;
    animation: fadeInUp 1s ease 0.8s forwards;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    opacity: 0;
    animation: fadeInUp 1s ease 1s forwards;
}

.btn {
    padding: 12px 30px;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    display: inline-block;
}

.btn-primary {
    background: var(--accent-tertiary);
    color: var(--text-primary);
}

.btn-primary:hover {
    background: #f59e0b;
    transform: translateY(-2px);
}

.btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.btn-secondary:hover {
    background: white;
    color: var(--accent-primary);
}

.hero-image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-bg-animation {
    width: 300px;
    height: 300px;
    background: linear-gradient(45deg, #fbbf24, #f59e0b, #d97706);
    border-radius: 50%;
    animation: float 6s ease-in-out infinite;
    opacity: 0.8;
}

/* Section Styles */
.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 3rem;
    color: var(--text-primary);
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

/* Keep main-page section titles centered even with global text justification */
section[id] .section-title {
    text-align: center !important;
}

.section-title.animate {
    opacity: 1;
    transform: translateY(0);

}

/* About Section */
.about {
    padding: 100px 0;
    background: var(--bg-secondary);
}

.about-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
    align-items: center;
}

.about-intro {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--accent-primary);
    margin-bottom: 1.5rem;
}

.about-text p {
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    line-height: 1.8;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.about-text p.animate {
    opacity: 1;
    transform: translateY(0);
}

.about-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

.stat {
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.stat.animate {
    opacity: 1;
    transform: translateY(0);
}

.stat h3 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent-primary);
    margin-bottom: 0.5rem;
}

.stat p {
    font-weight: 500;
    color: var(--text-secondary);
}

.about-image {
    display: flex;
    justify-content: center;
}

.profile-img {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid var(--accent-primary);
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.6s ease;
}

.profile-img.animate {
    opacity: 1;
    transform: scale(1);
}

/* Portfolio Section */
.portfolio {
    padding: 100px 0;
    background: var(--bg-primary);
}

.portfolio-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.portfolio-filter {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 10px 20px;
    border: 2px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-secondary);
    border-radius: 25px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
}

.portfolio-pagination-info {
    color: var(--text-secondary);
    font-weight: 500;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    min-height: 400px;
}

@media (max-width: 1024px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
    }
}

.portfolio-item {
    background: var(--bg-primary);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px var(--shadow-light);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(30px);
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.portfolio-item.animate {
    opacity: 1;
    transform: translateY(0);
}

.portfolio-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px var(--shadow-medium);
}

.portfolio-image {

    position: relative;
    overflow: hidden;
    height: 200px;
    flex-shrink: 0;
    /* mask-image: linear-gradient(to bottom, black 80%, transparent 90%); */
    /* -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 90%); */
}

.portfolio-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(37, 99, 235, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.portfolio-item:hover .portfolio-overlay {
    opacity: 1;
}

.portfolio-item:hover .portfolio-image img {
    transform: scale(1.1);
}

.portfolio-links {
    display: flex;
    gap: 1rem;
}

.portfolio-link {
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-primary);
    text-decoration: none;
    transition: transform 0.3s ease;
}

.portfolio-link:hover {
    transform: scale(1.1);
}

.portfolio-content {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.portfolio-content h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.portfolio-content p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
    line-height: 1.6;
    flex-grow: 1;
}

.portfolio-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: auto;
}

.portfolio-tech span {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.portfolio-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 3rem;
    flex-wrap: wrap;
}

.pagination-btn {
    padding: 12px 24px;
    border: 2px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pagination-btn:hover:not(:disabled) {
    background: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-numbers {
    display: flex;
    gap: 0.5rem;
}

.pagination-number {
    width: 40px;
    height: 40px;
    border: 2px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination-number:hover,
.pagination-number.active {
    background: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
}

.pagination-ellipsis {
    padding: 0 8px;
    color: var(--text-secondary);
    font-weight: 500;
}

.portfolio-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-secondary);
    font-size: 1.05rem;
    padding: 2rem;
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
}

/* Skills Section */
.skills {
    padding: 100px 0;
    background: var(--bg-secondary);
}

.skills-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
}

.skills-category {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.skills-category.animate {
    opacity: 1;
    transform: translateY(0);
}

.skills-category h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.skill-item {
    margin-bottom: 1.5rem;
}

.skill-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.skill-bar {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}

.skill-progress {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 4px;
    width: 0;
    transition: width 1.5s ease;
}

.skill-progress.animate {
    width: var(--width);
}

/* Contact Section */
.contact {
    padding: 100px 0;
    background: var(--bg-primary);
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

.contact-info {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.6s ease;
}

.contact-info.animate {
    opacity: 1;
    transform: translateX(0);
}

.contact-info h3 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.contact-info p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.contact-details {
    margin-bottom: 2rem;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.contact-item i {
    width: 20px;
    color: var(--accent-primary);
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-link {
    width: 50px;
    height: 50px;
    background: var(--accent-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-link:hover {
    background: var(--accent-secondary);
    transform: translateY(-3px);
}

.contact-form {
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.6s ease;
}

.contact-form.animate {
    opacity: 1;
    transform: translateX(0);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 15px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    font-size: 1rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: border-color 0.3s ease;
    font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.error-message {
    color: #ef4444;
    font-size: 0.9rem;
    margin-top: 0.5rem;
    display: block;
}

.success-notification,
.error-notification {
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
    animation: slideInDown 0.3s ease;
}

.success-notification {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.error-notification {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

[data-theme="dark"] .success-notification {
    background: #064e3b;
    color: #6ee7b7;
    border-color: #047857;
}

[data-theme="dark"] .error-notification {
    background: #7f1d1d;
    color: #fca5a5;
    border-color: #dc2626;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Footer */
.footer {
    background: var(--bg-secondary);
    color: var(--text-primary);
    text-align: center;
    padding: 2rem 0;
    border-top: 1px solid var(--border-color);
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

/* Responsive Design */
@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }
    
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background-color: white;
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
        padding: 2rem 0;
    }
    
    .nav-menu.active {
        left: 0;
    }

    .theme-toggle {
        margin-top: 1rem;
    }

    .nav-style-picker {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .style-select {
        width: min(260px, 88vw);
        margin-top: 0.5rem;
    }
    
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }
    
    .hero-name {
        font-size: 2.5rem;
    }
    
    .about-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    
    .about-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
    
    .portfolio-controls {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .portfolio-filter {
        justify-content: center;
    }

    .portfolio-pagination {
        flex-direction: column;
        gap: 1rem;
    }

    .pagination-numbers {
        justify-content: center;
    }
    
    .skills-content {
        grid-template-columns: 1fr;
    }
    
    .contact-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }
    
    .hero-name {
        font-size: 2rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .about-stats {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* Research Section Styles */
.research-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
    min-height: 300px;
}

.research-item {
    background: var(--bg-primary);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 6px var(--shadow-light);
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    opacity: 0;
    transform: translateY(20px);
}

.research-item.animate {
    opacity: 1;
    transform: translateY(0);
}

.research-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px var(--shadow-medium);
    border-color: var(--accent-primary);
}

.research-content {
    flex: 1;
    padding-right: 2rem;
}

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

.research-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.research-date {
    font-size: 0.85rem;
    color: var(--text-tertiary);
    font-weight: 500;
}

.research-meta {
    font-size: 0.9rem;
    color: var(--accent-secondary);
    margin-bottom: 0.8rem;
    font-weight: 500;
}

.research-description {
    color: var(--text-secondary);
    margin-bottom: 1rem;
    line-height: 1.6;
    font-size: 0.95rem;
}

.research-tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.research-tag {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.research-item:hover .research-tag {
    background: var(--accent-primary);
    color: rgb(60, 60, 60);
}

.research-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 40px;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.research-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.research-link:hover {
    background: var(--accent-primary);
    color: white;
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .research-item {
        flex-direction: column;
    }
    
    .research-content {
        padding-right: 0;
        margin-bottom: 1rem;
    }
    
    .research-actions {
        flex-direction: row;
        width: 100%;
        justify-content: flex-start;
    }
}

/* Project Post Pages */
.project-post {
    padding: 110px 0 80px;
    min-height: 80vh;
    background: var(--bg-secondary);
}

.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 600;
}

.back-btn:hover {
    color: var(--accent-secondary);
}

.post-article {
    background: var(--bg-primary);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px var(--shadow-light);
    padding: 2rem;
}

.post-header {
    margin-bottom: 2rem;
}

.project-post .project-category {
    display: inline-block;
    background: var(--accent-primary);
    color: white;
    text-transform: capitalize;
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.post-title {
    font-size: 2.2rem;
    line-height: 1.25;
    margin-bottom: 0.75rem;
}

.post-summary {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.post-date {
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.95rem;
}

.project-image-container {
    margin: 1.5rem 0 2rem;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.project-image-container img {
    border-radius: 12px;
    width: 100%;    
    height: auto;
    display: block;
}

.post-content {
    color: var(--text-primary);
    line-height: 1.8;
    font-size: 1.03rem;
}

.post-content h2,
.post-content h3,
.post-content h4 {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.post-content p,
.post-content ul,
.post-content ol {
    margin-bottom: 1rem;
}

.post-content ul,
.post-content ol {
    padding-left: 1.5rem;
}

.post-content a {
    color: var(--accent-primary);
}

.post-content blockquote {
    border-left: 4px solid var(--accent-primary);
    padding-left: 1rem;
    color: var(--text-secondary);
    margin: 1rem 0;
}

.post-content code {
    background: var(--bg-tertiary);
    padding: 0.1rem 0.35rem;
    border-radius: 6px;
    font-size: 0.92rem;
}

.post-content pre {
    background: var(--bg-tertiary);
    border-radius: 10px;
    padding: 1rem;
    overflow-x: auto;
    margin-bottom: 1.2rem;
}

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

.project-links {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .project-post {
        padding-top: 95px;
    }

    .post-article {
        padding: 1.25rem;
    }

    .post-title {
        font-size: 1.75rem;
    }
}

/* 2026 Frontend Refresh */
:root {
    --bg-primary: #f6f4ed;
    --bg-secondary: #ece6d8;
    --bg-tertiary: #d7cfbe;
    --bg-elevated: rgba(251, 248, 240, 0.85);
    --text-primary: #191511;
    --text-secondary: #4e453d;
    --text-tertiary: #7f7163;
    --accent-primary: #cf5a2c;
    --accent-secondary: #148f86;
    --accent-tertiary: #f1bf5b;
    --border-color: #c7baa8;
    --shadow-light: rgba(39, 24, 12, 0.12);
    --shadow-medium: rgba(39, 24, 12, 0.2);
    --navbar-bg: rgba(246, 244, 237, 0.78);
    --navbar-bg-scrolled: rgba(251, 248, 240, 0.94);
    --navbar-shadow: rgba(35, 20, 8, 0.2);
}

[data-theme="dark"] {
    --bg-primary: #111518;
    --bg-secondary: #171d22;
    --bg-tertiary: #222b33;
    --bg-elevated: rgba(20, 26, 31, 0.82);
    --text-primary: #f2e9d9;
    --text-secondary: #d0c2ab;
    --text-tertiary: #a58f74;
    --accent-primary: #ff9155;
    --accent-secondary: #56cfc2;
    --accent-tertiary: #f3cd73;
    --border-color: #2f3b44;
    --shadow-light: rgba(0, 0, 0, 0.35);
    --shadow-medium: rgba(0, 0, 0, 0.52);
    --navbar-bg: rgba(17, 21, 24, 0.78);
    --navbar-bg-scrolled: rgba(17, 21, 24, 0.92);
    --navbar-shadow: rgba(0, 0, 0, 0.58);
}

body {
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    background-color: var(--bg-primary);
    background-image:
        radial-gradient(circle at 85% 10%, rgba(20, 143, 134, 0.18), transparent 38%),
        radial-gradient(circle at 15% 20%, rgba(207, 90, 44, 0.16), transparent 32%),
        linear-gradient(140deg, rgba(255, 255, 255, 0.08) 0%, transparent 58%);
    color: var(--text-primary);
}

h1,
h2,
h3,
.section-title,
.hero-name,
.post-title,
.research-title,
.about-intro,
.nav-logo a {
    font-family: 'Fraunces', Georgia, serif;
}

.container {
    max-width: 1240px;
}

.navbar {
    background: var(--navbar-bg);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(14px);
}

.nav-container {
    height: 78px;
}

.nav-logo a {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: linear-gradient(150deg, var(--accent-primary), #7a2a0d);
    color: #fff3df;
    font-size: 1.5rem;
    box-shadow: 0 10px 20px rgba(122, 42, 13, 0.3);
}

.nav-menu {
    gap: 1.2rem;
}

.nav-link {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
    padding-bottom: 0.35rem;
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, var(--accent-secondary), var(--accent-primary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
    transform: scaleX(1);
}

.theme-toggle {
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: linear-gradient(145deg, var(--bg-secondary), var(--bg-primary));
    width: 42px;
    height: 42px;
}

.theme-toggle:hover {
    color: var(--accent-secondary);
    border-color: var(--accent-secondary);
    transform: translateY(-1px) scale(1.04);
}

.bar {
    background: var(--text-primary);
    border-radius: 20px;
}

.hero {
    background:
        linear-gradient(160deg, rgba(20, 143, 134, 0.9) 0%, rgba(14, 73, 69, 0.88) 48%, rgba(8, 39, 49, 0.93) 100%),
        radial-gradient(circle at 12% 18%, rgba(241, 191, 91, 0.45), transparent 36%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 90% 25%, rgba(255, 158, 109, 0.42), transparent 38%),
        radial-gradient(circle at 25% 85%, rgba(255, 255, 255, 0.14), transparent 42%);
    animation: hueShift 14s ease-in-out infinite alternate;
    pointer-events: none;
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        -35deg,
        rgba(255, 255, 255, 0.06),
        rgba(255, 255, 255, 0.06) 1px,
        transparent 1px,
        transparent 16px
    );
    pointer-events: none;
}

.hero-container {
    position: relative;
    z-index: 1;
}

.hero-name {
    font-size: clamp(2.6rem, 6vw, 4.5rem);
    line-height: 1.05;
    color: #fff4e0;
    letter-spacing: 0.015em;
}

.hero-title {
    color: #d7fff5;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.92rem;
    font-weight: 700;
}

.typewriter-container {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(7, 28, 34, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 999px;
    padding: 0.48rem 1rem;
    color: #e8fff8;
}

.typewriter {
    color: var(--accent-tertiary);
}

.cursor {
    color: #fff6e4;
}

.hero-description {
    max-width: 60ch;
    color: rgba(255, 248, 230, 0.92);
    font-size: 1.05rem;
}

.btn {
    border-radius: 12px;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    font-weight: 700;
    padding: 0.78rem 1.35rem;
    border: 1px solid transparent;
}

.btn-primary {
    background: linear-gradient(140deg, var(--accent-tertiary), #f39a40);
    color: #2a170b;
    box-shadow: 0 10px 24px rgba(241, 191, 91, 0.28);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(241, 191, 91, 0.38);
}

.btn-secondary {
    background: rgba(5, 26, 33, 0.5);
    color: #e4fff8;
    border: 1px solid rgba(228, 255, 248, 0.65);
}

.btn-secondary:hover {
    background: rgba(228, 255, 248, 0.95);
    color: #10443f;
}

.hero-bg-animation {
    width: min(72vw, 360px);
    height: min(72vw, 360px);
    border-radius: 43% 57% 50% 50% / 44% 36% 64% 56%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background:
        radial-gradient(circle at 30% 30%, #ffd89a 0%, transparent 40%),
        linear-gradient(140deg, #cf5a2c 0%, #8c2f0f 55%, #148f86 100%);
    box-shadow: 0 28px 60px rgba(5, 27, 34, 0.4);
    animation: pulseFloat 8s ease-in-out infinite;
}

.section-title {
    font-size: clamp(2rem, 4vw, 3.1rem);
    letter-spacing: 0.015em;
    margin-bottom: 2.6rem;
    text-align: center;
}

.section-title::after {
    content: '';
    display: block;
    width: 88px;
    height: 4px;
    margin: 0.9rem auto 0;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--accent-secondary), var(--accent-primary));
    transform: scaleX(0.4);
    transition: transform 0.5s ease;
}

.section-title.animate::after {
    transform: scaleX(1);
}

.about,
.portfolio,
.research,
.skills,
.contact {
    padding: 112px 0;
}

.about {
    background: linear-gradient(180deg, rgba(236, 230, 216, 0.86) 0%, var(--bg-primary) 100%);
}

.about-text {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: 22px;
    padding: 2rem;
    box-shadow: 0 16px 30px var(--shadow-light);
}

.about-intro {
    font-size: 1.5rem;
    color: var(--accent-primary);
            margin-top: 2.2rem;

}

.about-text p {
    color: var(--text-secondary);

    padding: 0rem 2rem 0rem 2rem;

}

.about-stats {
    margin-top: 2.2rem;
}

.stat {
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.38);
    border-radius: 16px;
    padding: 0rem;
    text-align: left;
        
}

[data-theme="dark"] .stat {
    background: rgba(255, 255, 255, 0.02);
}

.stat h3 {
    place-self: left;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
        padding: 0rem 0rem 0rem 2rem;

}

.profile-img {
    width: 320px;
    height: 320px;
    border: 6px solid var(--accent-secondary);
    box-shadow: 0 22px 40px var(--shadow-medium);
}

.portfolio-controls {
    padding: 1.1rem 1.2rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: 16px;
}

.filter-btn {
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
}

.filter-btn:hover,
.filter-btn.active {
    color: #fff5e5;
    border-color: transparent;
    background: linear-gradient(135deg, var(--accent-secondary), var(--accent-primary));
}

.portfolio-grid {
    gap: 1.5rem;
}

.portfolio-item {
    border-radius: 22px;
    border: 1px solid var(--border-color);
    background: var(--bg-elevated);
    box-shadow: 0 10px 24px var(--shadow-light);
            padding: 0rem 1rem 0rem 1rem;

}

.portfolio-item:hover {
    transform: translateY(-10px) rotateX(1.5deg);
    box-shadow: 0 18px 34px var(--shadow-medium);
}

.portfolio-image {
    height: 220px;
}

.portfolio-overlay {
    background: linear-gradient(0deg, rgba(18, 16, 14, 0.85) 0%, rgba(18, 16, 14, 0.15) 100%);
}

.portfolio-link {
    background: linear-gradient(135deg, var(--accent-primary), #7a2a0d);
    color: #fff9ee;
    border-radius: 14px;
}

.portfolio-content {
    padding: 1.35rem;
}

.portfolio-content h3 {
    font-size: 1.25rem;
    line-height: 1.25;
}

.portfolio-tech span,
.research-tag {
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.45);
}

[data-theme="dark"] .portfolio-tech span,
[data-theme="dark"] .research-tag {
    background: rgba(255, 255, 255, 0.03);
}

.pagination-btn,
.pagination-number {
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.pagination-btn:hover:not(:disabled),
.pagination-number:hover,
.pagination-number.active {
    background: linear-gradient(135deg, var(--accent-secondary), var(--accent-primary));
    color: #fff4e0;
    border-color: transparent;
}

.skills {
    background:
        linear-gradient(180deg, var(--bg-primary) 0%, rgba(236, 230, 216, 0.68) 100%),
        radial-gradient(circle at 8% 0%, rgba(20, 143, 134, 0.1), transparent 38%);
}

.skills-category {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: 0 12px 26px var(--shadow-light);
}

.skills-category h3 {
    font-size: 1.35rem;
    margin-bottom: 1.2rem;
}

.skill-bar {
    height: 10px;
    border-radius: 999px;
}

.skill-progress {
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent-secondary), var(--accent-primary));
}

.contact {
    background: var(--bg-primary);
}

.contact-info,
.contact-form {
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--bg-elevated);
    box-shadow: 0 16px 28px var(--shadow-light);
    padding: 1.6rem;
}

.contact-item {
    color: var(--text-secondary);
}

.contact-item i {
    color: var(--accent-primary);
}

.social-link {
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
}

.social-link:hover {
    background: var(--accent-primary);
    color: #fff5e4;
}

.form-group input,
.form-group textarea {
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.4);
}

[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group textarea {
    background: rgba(0, 0, 0, 0.16);
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--accent-secondary);
    box-shadow: 0 0 0 3px rgba(20, 143, 134, 0.18);
}

.research-list {
    gap: 1.1rem;
}

.research-item {
    border-radius: 18px;
    border: 1px solid var(--border-color);
    background: var(--bg-elevated);
    box-shadow: 0 10px 22px var(--shadow-light);
}

.research-item:hover {
    border-color: var(--accent-secondary);
}

.research-header {
    align-items: flex-start;
    gap: 1rem;
}

.research-date {
    font-size: 0.78rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
}
.research-doi {
    font-size: 0.78rem;
    padding: 0.2rem 0.6rem;
}
.research-link {
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);

}

.research-link:hover {
    background: linear-gradient(135deg, var(--accent-secondary), var(--accent-primary));
    color: #fff4e2;
}

.footer {
    background: linear-gradient(180deg, rgba(236, 230, 216, 0.32) 0%, rgba(215, 207, 190, 0.45) 100%);
}

.project-post {
    background: linear-gradient(180deg, rgba(236, 230, 216, 0.72) 0%, var(--bg-primary) 100%);
}

.post-article {
    border-radius: 24px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    box-shadow: 0 18px 34px var(--shadow-light);
}

.post-summary {
    max-width: 75ch;
}

.post-content h2,
.post-content h3,
.post-content h4 {
    border-left: 4px solid var(--accent-secondary);
    padding-left: 0.75rem;
}

.post-content a {
    color: var(--accent-primary);
    font-weight: 600;
}

.project-links .btn-secondary {
    color: var(--text-primary);
    border-color: var(--border-color);
    background: transparent;
}

.project-links .btn-secondary:hover {
    color: #fff4e1;
    border-color: transparent;
    background: linear-gradient(135deg, var(--accent-secondary), var(--accent-primary));
}

@keyframes pulseFloat {
    0%,
    100% {
        transform: translateY(0);
        border-radius: 43% 57% 50% 50% / 44% 36% 64% 56%;
    }
    50% {
        transform: translateY(-14px);
        border-radius: 56% 44% 63% 37% / 35% 58% 42% 65%;
    }
}

@keyframes hueShift {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(24deg);
    }
}

@media (max-width: 900px) {
    .hero-container {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-description {
        margin-inline: auto;
    }

    .hero-image {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .nav-menu {
        top: 78px;
        background: var(--bg-elevated);
        backdrop-filter: blur(16px);
        border-top: 1px solid var(--border-color);
        box-shadow: 0 20px 40px var(--shadow-light);
    }

    .nav-link {
        font-size: 0.86rem;
    }

    .section-title {
        font-size: 2rem;
        text-align: center;
    }

    .about-text,
    .contact-info,
    .contact-form,
    .skills-category {
        padding: 1.25rem;
    }

    .portfolio-controls {
        padding: 0.8rem;
    }

    .hero-bg-animation {
        width: min(74vw, 300px);
        height: min(74vw, 300px);
    }

    /* Keep fixed navbar from covering first hero content on mobile */
    .hero {
        padding-top: 92px;
    }
}

@media (max-width: 540px) {
    .btn {
        width: 100%;
        text-align: center;
    }

    .hero-buttons {
        width: 100%;
    }

    .hero-title {
        font-size: 0.82rem;
        letter-spacing: 0.08em;
    }

    .typewriter-container {
        font-size: 0.95rem;
        padding: 0.4rem 0.8rem;
    }
}

/* Alternate style variants */
body[data-style="minimal"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f7f7f5;
    --bg-tertiary: #ecebe8;
    --bg-elevated: rgba(255, 255, 255, 0.95);
    --text-primary: #37352f;
    --text-secondary: #64625c;
    --text-tertiary: #929089;
    --accent-primary: #37352f;
    --accent-secondary: #78756f;
    --accent-tertiary: #ecebe8;
    --border-color: #e9e9e7;
    --shadow-light: rgba(15, 15, 15, 0.04);
    --shadow-medium: rgba(15, 15, 15, 0.08);
    --navbar-bg: rgba(255, 255, 255, 0.9);
    --navbar-bg-scrolled: rgba(255, 255, 255, 0.96);
    --navbar-shadow: rgba(15, 15, 15, 0.1);
}

body[data-style="minimal"][data-theme="dark"] {
    --bg-primary: #191919;
    --bg-secondary: #202020;
    --bg-tertiary: #2a2a2a;
    --bg-elevated: rgba(32, 32, 32, 0.92);
    --text-primary: #e8e8e6;
    --text-secondary: #c3c3bf;
    --text-tertiary: #9d9c98;
    --accent-primary: #e8e8e6;
    --accent-secondary: #c3c3bf;
    --accent-tertiary: #2a2a2a;
    --border-color: #323232;
    --shadow-light: rgba(0, 0, 0, 0.2);
    --shadow-medium: rgba(0, 0, 0, 0.32);
    --navbar-bg: rgba(25, 25, 25, 0.88);
    --navbar-bg-scrolled: rgba(25, 25, 25, 0.95);
    --navbar-shadow: rgba(0, 0, 0, 0.42);
}

body[data-style="minimal"] {
    background-image: none;
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    font-size: 1.04rem;
}

body[data-style="minimal"] h1,
body[data-style="minimal"] h2,
body[data-style="minimal"] h3,
body[data-style="minimal"] .section-title,
body[data-style="minimal"] .hero-name,
body[data-style="minimal"] .post-title,
body[data-style="minimal"] .research-title,
body[data-style="minimal"] .about-intro,
body[data-style="minimal"] .nav-logo a {
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    letter-spacing: -0.01em;
}

body[data-style="minimal"] .navbar {
    backdrop-filter: blur(10px);
}

body[data-style="minimal"] .nav-container {
    height: 72px;
}

body[data-style="minimal"] .nav-menu {
    gap: 0.9rem;
}

body[data-style="minimal"] .hero {
    background: var(--bg-primary);
    border-bottom-color: var(--border-color);
    min-height: 92vh;
}

body[data-style="minimal"] .hero-container {
    gap: 2.25rem;
}

body[data-style="minimal"] .hero::before,
body[data-style="minimal"] .hero::after {
    display: none;
}

body[data-style="minimal"] .hero-name {
    color: var(--text-primary);
}

body[data-style="minimal"] .hero-title {
    color: var(--text-secondary);
}

body[data-style="minimal"] .typewriter-container {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-color: var(--border-color);
    border-radius: 8px;
    padding: 0.4rem 0.78rem;
    margin-bottom: 1.15rem;
}

body[data-style="minimal"] .typewriter {
    color: var(--text-primary);
}

body[data-style="minimal"] .cursor {
    color: var(--text-tertiary);
}

body[data-style="minimal"] .hero-description {
    color: var(--text-secondary);
    margin-bottom: 1.35rem;
    max-width: 52ch;
}

body[data-style="minimal"] .nav-logo a,
body[data-style="minimal"] .portfolio-link {
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    box-shadow: none;
}

body[data-style="minimal"] .nav-link {
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 0.88rem;
    font-weight: 600;
}

body[data-style="minimal"] .nav-link::after {
    height: 1px;
    background: var(--text-secondary);
}

body[data-style="minimal"] .style-select,
body[data-style="minimal"] .theme-toggle {
    background: var(--bg-primary);
    border-color: var(--border-color);
    box-shadow: none;
}

body[data-style="minimal"] .style-select {
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 0.86rem;
    height: 38px;
    border-radius: 10px;
    min-width: 116px;
}

body[data-style="minimal"] .style-select:hover,
body[data-style="minimal"] .style-select:focus,
body[data-style="minimal"] .form-group input:focus,
body[data-style="minimal"] .form-group textarea:focus {
    border-color: var(--text-secondary);
    box-shadow: 0 0 0 3px rgba(55, 53, 47, 0.12);
}

body[data-style="minimal"][data-theme="dark"] .style-select:hover,
body[data-style="minimal"][data-theme="dark"] .style-select:focus,
body[data-style="minimal"][data-theme="dark"] .form-group input:focus,
body[data-style="minimal"][data-theme="dark"] .form-group textarea:focus {
    box-shadow: 0 0 0 3px rgba(232, 232, 230, 0.16);
}

body[data-style="minimal"] .theme-toggle:hover {
    background: var(--bg-secondary);
}

body[data-style="minimal"] .theme-toggle {
    width: 38px;
    height: 38px;
    border-radius: 10px;
}

body[data-style="minimal"] .btn {
    border-radius: 6px;
    font-size: 0.98rem;
    letter-spacing: 0.01em;
    padding: 0.64rem 1rem;
}

body[data-style="minimal"] .hero-buttons {
    gap: 0.7rem;
}

body[data-style="minimal"] .btn-primary {
    background: var(--text-primary);
    color: var(--bg-primary);
    box-shadow: none;
}

body[data-style="minimal"] .btn-primary:hover {
    background: var(--text-secondary);
    transform: translateY(-1px);
    box-shadow: none;
}

body[data-style="minimal"][data-theme="dark"] .btn-primary {
    background: #e8e8e6;
    color: #191919;
}

body[data-style="minimal"] .btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-color);
}

body[data-style="minimal"] .btn-secondary:hover,
body[data-style="minimal"] .project-links .btn-secondary:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

body[data-style="minimal"] .about,
body[data-style="minimal"] .skills,
body[data-style="minimal"] .project-post,
body[data-style="minimal"] .footer {
    background: var(--bg-primary);
}

body[data-style="minimal"] .about,
body[data-style="minimal"] .portfolio,
body[data-style="minimal"] .research,
body[data-style="minimal"] .skills,
body[data-style="minimal"] .contact {
    padding: 90px 0;
}

body[data-style="minimal"] .project-post {
    padding: 92px 0 58px;
}

body[data-style="minimal"] .section-title {
    margin-bottom: 2rem;
}

body[data-style="minimal"] .about-text,
body[data-style="minimal"] .portfolio-controls,
body[data-style="minimal"] .portfolio-item,
body[data-style="minimal"] .research-item,
body[data-style="minimal"] .skills-category,
body[data-style="minimal"] .contact-info,
body[data-style="minimal"] .contact-form,
body[data-style="minimal"] .post-article,
body[data-style="minimal"] .stat {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 4px 10px var(--shadow-light);
}

body[data-style="minimal"] .about-text,
body[data-style="minimal"] .skills-category,
body[data-style="minimal"] .contact-info,
body[data-style="minimal"] .contact-form,
body[data-style="minimal"] .post-article {
    padding: 1.35rem;
}

body[data-style="minimal"] .portfolio-controls {
    padding: 0.85rem 0.95rem;
}

body[data-style="minimal"] .portfolio-content {
    padding: 1.05rem;
}

body[data-style="minimal"] .portfolio-image {
    height: 206px;
}

body[data-style="minimal"] .research-content {
    padding-right: 1.35rem;
}

body[data-style="minimal"] .research-description {
    margin-bottom: 0.7rem;
}

body[data-style="minimal"] .project-links {
    margin-top: 1.4rem;
    gap: 0.7rem;
}

body[data-style="minimal"] .portfolio-item:hover,
body[data-style="minimal"] .research-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 14px var(--shadow-medium);
}

body[data-style="minimal"] .portfolio-overlay {
    background: linear-gradient(0deg, rgba(21, 21, 20, 0.72) 0%, rgba(21, 21, 20, 0.12) 100%);
}

body[data-style="minimal"] .portfolio-tech span,
body[data-style="minimal"] .research-tag {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    border-radius: 8px;
    padding: 0.18rem 0.58rem;
    font-size: 0.78rem;
}

body[data-style="minimal"] .filter-btn,
body[data-style="minimal"] .pagination-btn,
body[data-style="minimal"] .pagination-number,
body[data-style="minimal"] .research-link,
body[data-style="minimal"] .social-link,
body[data-style="minimal"] .form-group input,
body[data-style="minimal"] .form-group textarea,
body[data-style="minimal"] .project-image-container {
    border-radius: 8px;
}

body[data-style="minimal"] .filter-btn:hover,
body[data-style="minimal"] .filter-btn.active,
body[data-style="minimal"] .pagination-btn:hover:not(:disabled),
body[data-style="minimal"] .pagination-number:hover,
body[data-style="minimal"] .pagination-number.active,
body[data-style="minimal"] .research-link:hover {
    background: var(--text-primary);
    color: var(--bg-primary);
    border-color: var(--text-primary);
}

body[data-style="minimal"] .section-title::after {
    width: 72px;
    height: 2px;
    background: var(--border-color);
}

body[data-style="minimal"] .post-content h2,
body[data-style="minimal"] .post-content h3,
body[data-style="minimal"] .post-content h4 {
    border-left-color: var(--border-color);
}

body[data-style="minimal"] .post-content a {
    color: #0b6bcb;
}

body[data-style="minimal"][data-theme="dark"] .post-content a {
    color: #8ab4ff;
}

body[data-style="minimal"] .hero-bg-animation {
    width: min(58vw, 286px);
    height: min(58vw, 286px);
    background: linear-gradient(140deg, #fcfcfb 0%, #f2f2ef 100%);
    border-radius: 12px;
    border: 3px solid #000000;
    box-shadow: 0 6px 12px var(--shadow-light);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    animation: float 6s ease-in-out infinite;
}

body[data-style="minimal"] .hero-bg-animation::before,
body[data-style="minimal"] .hero-bg-animation::after {
    content: '';
    position: absolute;
    pointer-events: none;
}

body[data-style="minimal"] .hero-bg-animation::before {
    inset: 12% -2%;
    background-image: url('img/minimal-laptop-workspace-light.png');
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: 0 center;
    opacity: 0.88;
    filter: contrast(1.03);
    animation: minimalAvatarPan 52s linear infinite;
}

body[data-style="minimal"] .hero-bg-animation::after {
    display: none;
}

body[data-style="minimal"][data-theme="dark"] .hero-bg-animation {
    background: linear-gradient(140deg, #232323 0%, #1e1e1e 100%);
    border: 1px solid var(--border-color);
}

body[data-style="minimal"][data-theme="dark"] .hero-bg-animation::before {
    background-image: url('img/minimal-laptop-workspace-dark.png');
    opacity: 0.8;
    filter: contrast(1.06);
}

@keyframes minimalAvatarPan {
    0% {
        background-position: 0 center;
    }
    100% {
        background-position: -860px center;
    }
}

@keyframes technicalHeroScan {
    0%,
    100% {
        transform: translateY(-4px);
        opacity: 0.44;
    }
    50% {
        transform: translateY(6px);
        opacity: 0.74;
    }
}

@keyframes technicalGridShift {
    0% {
        background-position: 0 0, 0 0;
    }
    100% {
        background-position: 26px 26px, -22px 0;
    }
}

body[data-style="technical"] {
    --bg-primary: #edf3ff;
    --bg-secondary: #e1eaff;
    --bg-tertiary: #ccd8f4;
    --bg-elevated: rgba(245, 250, 255, 0.92);
    --text-primary: #081a33;
    --text-secondary: #22446f;
    --text-tertiary: #4c6792;
    --accent-primary: #1967ff;
    --accent-secondary: #00b8d8;
    --accent-tertiary: #89f2ff;
    --border-color: #a8c0ea;
    --shadow-light: rgba(6, 24, 58, 0.16);
    --shadow-medium: rgba(6, 24, 58, 0.26);
    --navbar-bg: rgba(237, 243, 255, 0.84);
    --navbar-bg-scrolled: rgba(246, 251, 255, 0.96);
    --navbar-shadow: rgba(8, 26, 51, 0.28);
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
}

body[data-style="technical"][data-theme="dark"] {
    --bg-primary: #060d1a;
    --bg-secondary: #0a1426;
    --bg-tertiary: #12203a;
    --bg-elevated: rgba(9, 17, 34, 0.92);
    --text-primary: #e9f2ff;
    --text-secondary: #bdd0ed;
    --text-tertiary: #869fcb;
    --accent-primary: #7fabff;
    --accent-secondary: #4adfff;
    --accent-tertiary: #9af4ff;
    --border-color: #26456f;
    --shadow-light: rgba(0, 0, 0, 0.38);
    --shadow-medium: rgba(0, 0, 0, 0.54);
    --navbar-bg: rgba(6, 13, 26, 0.88);
    --navbar-bg-scrolled: rgba(6, 13, 26, 0.96);
    --navbar-shadow: rgba(0, 0, 0, 0.58);
}

body[data-style="technical"] {
    color: var(--text-primary);
    background-image:
        linear-gradient(rgba(25, 103, 255, 0.075) 1px, transparent 1px),
        linear-gradient(90deg, rgba(25, 103, 255, 0.075) 1px, transparent 1px),
        radial-gradient(circle at 82% 14%, rgba(0, 184, 216, 0.24), transparent 36%),
        radial-gradient(circle at 18% 82%, rgba(25, 103, 255, 0.18), transparent 34%);
    background-size: 32px 32px, 32px 32px, auto, auto;
    background-position: 0 0, 0 0, 100% 0, 0 100%;
}

body[data-style="technical"] h1,
body[data-style="technical"] h2,
body[data-style="technical"] h3,
body[data-style="technical"] .section-title,
body[data-style="technical"] .hero-name,
body[data-style="technical"] .post-title,
body[data-style="technical"] .research-title,
body[data-style="technical"] .about-intro,
body[data-style="technical"] .nav-logo a {
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    letter-spacing: 0.01em;
}

body[data-style="technical"] .nav-link,
body[data-style="technical"] .style-select,
body[data-style="technical"] .btn,
body[data-style="technical"] .project-category,
body[data-style="technical"] .research-date,
body[data-style="technical"] .filter-btn,
body[data-style="technical"] .portfolio-tech span,
body[data-style="technical"] .research-tag {
    font-family: 'IBM Plex Mono', Consolas, monospace;
}

body[data-style="technical"] .navbar {
    backdrop-filter: blur(12px) saturate(130%);
    border-bottom-color: rgba(63, 120, 210, 0.38);
}

body[data-style="technical"] .nav-link {
    letter-spacing: 0.08em;
    font-size: 0.77rem;
}

body[data-style="technical"] .nav-link::after {
    background: linear-gradient(90deg, var(--accent-secondary), var(--accent-primary));
}

body[data-style="technical"] .style-select,
body[data-style="technical"] .theme-toggle {
    border-color: rgba(44, 105, 204, 0.46);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.82), rgba(221, 235, 255, 0.82));
}

body[data-style="technical"][data-theme="dark"] .style-select,
body[data-style="technical"][data-theme="dark"] .theme-toggle {
    background: linear-gradient(160deg, rgba(9, 21, 40, 0.9), rgba(8, 16, 31, 0.95));
}

body[data-style="technical"] .style-select:hover,
body[data-style="technical"] .style-select:focus,
body[data-style="technical"] .form-group input:focus,
body[data-style="technical"] .form-group textarea:focus {
    border-color: var(--accent-secondary);
    box-shadow: 0 0 0 3px rgba(0, 184, 216, 0.2);
}

body[data-style="technical"] .hero {
    background:
        linear-gradient(160deg, rgba(12, 42, 99, 0.95) 0%, rgba(8, 27, 67, 0.96) 52%, rgba(6, 19, 47, 0.98) 100%),
        radial-gradient(circle at 16% 18%, rgba(137, 242, 255, 0.26), transparent 36%),
        radial-gradient(circle at 82% 78%, rgba(25, 103, 255, 0.22), transparent 34%);
    border-bottom-color: rgba(149, 214, 255, 0.26);
}

body[data-style="technical"] .hero::before {
    background:
        linear-gradient(180deg, rgba(118, 206, 255, 0) 0%, rgba(118, 206, 255, 0.25) 50%, rgba(118, 206, 255, 0) 100%),
        radial-gradient(circle at 20% 20%, rgba(145, 232, 255, 0.22), transparent 40%);
    animation: technicalHeroScan 10s ease-in-out infinite;
    opacity: 0.62;
}

body[data-style="technical"] .hero::after {
    background: repeating-linear-gradient(
        0deg,
        rgba(149, 222, 255, 0.08),
        rgba(149, 222, 255, 0.08) 1px,
        transparent 1px,
        transparent 17px
    ),
    repeating-linear-gradient(
        90deg,
        rgba(149, 222, 255, 0.07),
        rgba(149, 222, 255, 0.07) 1px,
        transparent 1px,
        transparent 17px
    );
    animation: technicalGridShift 14s linear infinite;
    opacity: 0.56;
}

body[data-style="technical"] .hero-name {
    color: #edf6ff;
    line-height: 1.04;
}

body[data-style="technical"] .hero-title {
    color: #b7ecff;
    letter-spacing: 0.12em;
}

body[data-style="technical"] .typewriter-container {
    background: rgba(6, 22, 50, 0.58);
    border: 1px solid rgba(142, 226, 255, 0.46);
    border-radius: 10px;
    color: #e0f5ff;
}

body[data-style="technical"] .typewriter {
    color: var(--accent-tertiary);
}

body[data-style="technical"] .hero-description {
    color: rgba(230, 241, 255, 0.94);
    max-width: 62ch;
}

body[data-style="technical"] .nav-logo a,
body[data-style="technical"] .portfolio-link {
    border: 1px solid rgba(142, 209, 255, 0.36);
    background: linear-gradient(145deg, rgba(26, 87, 214, 0.96), rgba(14, 40, 111, 0.98));
}

body[data-style="technical"] .btn {
    border-radius: 10px;
    letter-spacing: 0.03em;
}

body[data-style="technical"] .btn-primary {
    background: linear-gradient(145deg, var(--accent-secondary), var(--accent-primary));
    color: #f4fbff;
    box-shadow: 0 12px 24px rgba(0, 97, 153, 0.3);
}

body[data-style="technical"] .btn-primary:hover {
    box-shadow: 0 16px 30px rgba(0, 97, 153, 0.38);
}

body[data-style="technical"] .btn-secondary {
    border-color: rgba(169, 230, 255, 0.74);
    background: rgba(5, 22, 46, 0.46);
}

body[data-style="technical"] .btn-secondary:hover,
body[data-style="technical"] .project-links .btn-secondary:hover {
    background: rgba(222, 249, 255, 0.95);
    border-color: rgba(222, 249, 255, 0.95);
    color: #0b2b48;
}

body[data-style="technical"] .portfolio-item,
body[data-style="technical"] .research-item,
body[data-style="technical"] .skills-category,
body[data-style="technical"] .post-article,
body[data-style="technical"] .contact-info,
body[data-style="technical"] .contact-form,
body[data-style="technical"] .about-text,
body[data-style="technical"] .portfolio-controls {
    border-color: var(--border-color);
    background: linear-gradient(165deg, rgba(246, 251, 255, 0.9), rgba(228, 240, 255, 0.82));
    box-shadow: 0 12px 30px var(--shadow-light);
}

body[data-style="technical"][data-theme="dark"] .portfolio-item,
body[data-style="technical"][data-theme="dark"] .research-item,
body[data-style="technical"][data-theme="dark"] .skills-category,
body[data-style="technical"][data-theme="dark"] .post-article,
body[data-style="technical"][data-theme="dark"] .contact-info,
body[data-style="technical"][data-theme="dark"] .contact-form,
body[data-style="technical"][data-theme="dark"] .about-text,
body[data-style="technical"][data-theme="dark"] .portfolio-controls {
    background: linear-gradient(165deg, rgba(11, 24, 46, 0.9), rgba(9, 18, 35, 0.94));
}

body[data-style="technical"] .section-title::after {
    background: linear-gradient(90deg, var(--accent-secondary), var(--accent-primary), var(--accent-tertiary));
}

body[data-style="technical"] .portfolio-overlay {
    background: linear-gradient(0deg, rgba(4, 12, 24, 0.88) 0%, rgba(4, 12, 24, 0.2) 100%);
}

body[data-style="technical"] .portfolio-tech span,
body[data-style="technical"] .research-tag {
    border-color: rgba(58, 120, 220, 0.46);
    background: rgba(222, 241, 255, 0.66);
}

body[data-style="technical"][data-theme="dark"] .portfolio-tech span,
body[data-style="technical"][data-theme="dark"] .research-tag {
    background: rgba(18, 36, 66, 0.84);
}

body[data-style="technical"] .post-content h2,
body[data-style="technical"] .post-content h3,
body[data-style="technical"] .post-content h4 {
    border-left-color: var(--accent-primary);
}

body[data-style="technical"] .post-content a {
    color: #007fac;
}

body[data-style="technical"][data-theme="dark"] .post-content a {
    color: #7de8ff;
}

body[data-style="technical"] .research-link,
body[data-style="technical"] .pagination-btn,
body[data-style="technical"] .pagination-number,
body[data-style="technical"] .filter-btn,
body[data-style="technical"] .social-link {
    border-color: rgba(62, 123, 216, 0.44);
    border-radius: 10px;
}

body[data-style="technical"] .filter-btn:hover,
body[data-style="technical"] .filter-btn.active,
body[data-style="technical"] .pagination-btn:hover:not(:disabled),
body[data-style="technical"] .pagination-number:hover,
body[data-style="technical"] .pagination-number.active,
body[data-style="technical"] .research-link:hover {
    background: linear-gradient(145deg, var(--accent-secondary), var(--accent-primary));
    color: #f4fbff;
}

/* Editorial variant: minimal architect magazine */
body[data-style="editorial"],
body:not([data-style]) {
    --bg-primary: #f8f8f6;
    --bg-secondary: #efefec;
    --bg-tertiary: #dddcd7;
    --bg-elevated: rgba(255, 255, 255, 0.96);
    --text-primary: #141414;
    --text-secondary: #2d2d2a;
    --text-tertiary: #6a6761;
    --accent-primary: #181818;
    --accent-secondary: #4a4a46;
    --accent-tertiary: #b7b3ab;
    --border-color: #bebbb4;
    --shadow-light: rgba(17, 17, 17, 0.02);
    --shadow-medium: rgba(17, 17, 17, 0.06);
    --navbar-bg: rgba(248, 248, 246, 0.9);
    --navbar-bg-scrolled: rgba(255, 255, 254, 0.97);
    --navbar-shadow: rgba(17, 17, 17, 0.08);
    font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    font-size: clamp(1.03rem, 0.28vw + 0.98rem, 1.11rem);
    line-height: 1.76;
    letter-spacing: 0.001em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    background-image:
        radial-gradient(circle at 12% 14%, rgba(255, 157, 180, 0.34) 0%, rgba(255, 157, 180, 0) 34%),
        radial-gradient(circle at 88% 84%, rgba(255, 168, 92, 0.32) 0%, rgba(255, 168, 92, 0) 32%),
        radial-gradient(circle at 64% 20%, rgba(201, 202, 217, 0.42) 0%, rgba(201, 202, 217, 0) 28%),
        radial-gradient(circle at 24% 78%, rgba(255, 196, 210, 0.28) 0%, rgba(255, 196, 210, 0) 26%),
        radial-gradient(circle at 74% 42%, rgba(255, 255, 255, 0.56) 0%, rgba(255, 255, 255, 0) 18%),
        linear-gradient(
            132deg,
            rgba(255, 255, 255, 0) 28%,
            rgba(255, 180, 154, 0.22) 28%,
            rgba(255, 180, 154, 0.22) 42%,
            rgba(255, 255, 255, 0) 42%
        ),
        conic-gradient(from 126deg at 78% 16%, rgba(255, 183, 120, 0.24), rgba(255, 183, 120, 0) 50%),
        repeating-linear-gradient(90deg, rgba(173, 173, 186, 0.12) 0 1px, transparent 1px 124px),
        linear-gradient(180deg, rgba(255, 252, 250, 0.82) 0%, rgba(244, 240, 244, 0.72) 48%, rgba(240, 236, 241, 0.78) 100%);
    background-size: auto, auto, auto, auto, 124px 124px, auto;
    background-position: 0 0, 100% 100%, 0 0, 0 0, 0 0, 0 0;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat;
}

body[data-style="editorial"][data-theme="dark"],
body:not([data-style])[data-theme="dark"] {
    --bg-primary: #0f1011;
    --bg-secondary: #17181a;
    --bg-tertiary: #232427;
    --bg-elevated: rgba(22, 23, 25, 0.94);
    --text-primary: #f1f0ec;
    --text-secondary: #d9d7d0;
    --text-tertiary: #aaa7a0;
    --accent-primary: #f1f0ec;
    --accent-secondary: #c7c5be;
    --accent-tertiary: #5a5955;
    --border-color: #3f4145;
    --shadow-light: rgba(0, 0, 0, 0.12);
    --shadow-medium: rgba(0, 0, 0, 0.2);
    --navbar-bg: rgba(15, 16, 17, 0.9);
    --navbar-bg-scrolled: rgba(15, 16, 17, 0.96);
    --navbar-shadow: rgba(0, 0, 0, 0.22);
    background-image:
        radial-gradient(circle at 14% 18%, rgba(241, 240, 236, 0.09) 0%, rgba(241, 240, 236, 0) 33%),
        radial-gradient(circle at 86% 82%, rgba(199, 197, 190, 0.08) 0%, rgba(199, 197, 190, 0) 30%),
        linear-gradient(
            132deg,
            rgba(241, 240, 236, 0) 28%,
            rgba(241, 240, 236, 0.05) 28%,
            rgba(241, 240, 236, 0.05) 42%,
            rgba(241, 240, 236, 0) 42%
        ),
        conic-gradient(from 126deg at 74% 14%, rgba(241, 240, 236, 0.08), rgba(241, 240, 236, 0) 48%),
        repeating-linear-gradient(90deg, rgba(241, 240, 236, 0.03) 0 1px, transparent 1px 124px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(0, 0, 0, 0.13) 100%);
    background-size: auto, auto, auto, auto, 124px 124px, auto;
    background-position: 0 0, 100% 100%, 0 0, 0 0, 0 0, 0 0;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat;
}

body[data-style="editorial"] h1,
body[data-style="editorial"] h2,
body[data-style="editorial"] h3,
body[data-style="editorial"] .section-title,
body[data-style="editorial"] .hero-name,
body[data-style="editorial"] .post-title,
body[data-style="editorial"] .research-title,
body[data-style="editorial"] .about-intro,
body[data-style="editorial"] .nav-logo a,
body:not([data-style]) h1,
body:not([data-style]) h2,
body:not([data-style]) h3,
body:not([data-style]) .section-title,
body:not([data-style]) .hero-name,
body:not([data-style]) .post-title,
body:not([data-style]) .research-title,
body:not([data-style]) .about-intro,
body:not([data-style]) .nav-logo a {
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    font-weight: 600;
    letter-spacing: 0.01em;
}

body[data-style="editorial"] .nav-link,
body[data-style="editorial"] .style-select,
body[data-style="editorial"] .btn,
body[data-style="editorial"] .project-category,
body[data-style="editorial"] .research-date,
body:not([data-style]) .nav-link,
body:not([data-style]) .style-select,
body:not([data-style]) .btn,
body:not([data-style]) .project-category,
body:not([data-style]) .research-date {
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
}

body[data-style="editorial"] .navbar,
body:not([data-style]) .navbar {
    backdrop-filter: blur(8px);
}

body[data-style="editorial"] .nav-container,
body:not([data-style]) .nav-container {
    height: 80px;
}

body[data-style="editorial"] .nav-link,
body:not([data-style]) .nav-link {
    color: var(--text-primary);
    font-size: 0.83rem;
    letter-spacing: 0.08em;
}

body[data-style="editorial"] .nav-link::after,
body:not([data-style]) .nav-link::after {
    height: 1px;
    background: var(--text-primary);
}

body[data-style="editorial"] .style-select,
body[data-style="editorial"] .theme-toggle,
body:not([data-style]) .style-select,
body:not([data-style]) .theme-toggle {
    height: 42px;
    border-radius: 6px;
    border-color: var(--border-color);
    background: var(--bg-primary);
}

body[data-style="editorial"] .style-select:hover,
body[data-style="editorial"] .style-select:focus,
body[data-style="editorial"] .form-group input:focus,
body[data-style="editorial"] .form-group textarea:focus,
body:not([data-style]) .style-select:hover,
body:not([data-style]) .style-select:focus,
body:not([data-style]) .form-group input:focus,
body:not([data-style]) .form-group textarea:focus {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 3px rgba(20, 20, 20, 0.14);
}

body[data-style="editorial"][data-theme="dark"] .style-select:hover,
body[data-style="editorial"][data-theme="dark"] .style-select:focus,
body[data-style="editorial"][data-theme="dark"] .form-group input:focus,
body[data-style="editorial"][data-theme="dark"] .form-group textarea:focus,
body:not([data-style])[data-theme="dark"] .style-select:hover,
body:not([data-style])[data-theme="dark"] .style-select:focus,
body:not([data-style])[data-theme="dark"] .form-group input:focus,
body:not([data-style])[data-theme="dark"] .form-group textarea:focus {
    box-shadow: 0 0 0 3px rgba(241, 240, 236, 0.2);
}

body[data-style="editorial"] .hero,
body:not([data-style]) .hero {
    min-height: 95vh;
    background:
        linear-gradient(
            118deg,
            rgba(248, 247, 243, 0) 26%,
            rgba(248, 247, 243, 0.1) 26%,
            rgba(248, 247, 243, 0.1) 38%,
            rgba(248, 247, 243, 0) 38%
        ),
        linear-gradient(162deg, #121212 0%, #1d1d1d 58%, #292929 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

body[data-style="editorial"] .hero::before,
body[data-style="editorial"] .hero::after,
body:not([data-style]) .hero::before,
body:not([data-style]) .hero::after {
    display: none;
}

body[data-style="editorial"] .hero-name,
body:not([data-style]) .hero-name {
    color: #f8f7f3;
    line-height: 1.04;
}

body[data-style="editorial"] .hero-title,
body:not([data-style]) .hero-title {
    color: #cfcac0;
    font-size: 0.96rem;
    letter-spacing: 0.14em;
}

body[data-style="editorial"] .typewriter-container,
body:not([data-style]) .typewriter-container {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 6px;
    color: #efebe2;
}

body[data-style="editorial"] .hero-description,
body:not([data-style]) .hero-description {
    color: rgba(247, 244, 238, 0.95);
    font-size: 1.08rem;
    line-height: 1.78;
    max-width: 66ch;
}

body[data-style="editorial"] .nav-logo a,
body[data-style="editorial"] .portfolio-link,
body:not([data-style]) .nav-logo a,
body:not([data-style]) .portfolio-link {
    background: var(--text-primary);
    color: var(--bg-primary);
    border-radius: 6px;
    box-shadow: none;
}

body[data-style="editorial"] .hero-bg-animation,
body:not([data-style]) .hero-bg-animation {
    width: min(68vw, 340px);
    height: min(68vw, 340px);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background:
        linear-gradient(145deg, #f2f2ef 0%, #e5e4df 100%),
        repeating-linear-gradient(0deg, rgba(17, 17, 17, 0.08) 0 1px, transparent 1px 18px),
        repeating-linear-gradient(90deg, rgba(17, 17, 17, 0.07) 0 1px, transparent 1px 18px);
    background-blend-mode: normal, multiply, multiply;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    box-shadow: none;
    animation: none;
}

body[data-style="editorial"] .hero-bg-animation::before,
body:not([data-style]) .hero-bg-animation::before {
    content: '';
    position: absolute;
    pointer-events: none;
}

body[data-style="editorial"] .hero-bg-animation::before,
body:not([data-style]) .hero-bg-animation::before {
    inset: 12%;
    border: 1px solid rgba(17, 17, 17, 0.22);
    background:
        linear-gradient(135deg, transparent 45%, rgba(17, 17, 17, 0.16) 45%, rgba(17, 17, 17, 0.16) 55%, transparent 55%),
        linear-gradient(-45deg, transparent 47%, rgba(17, 17, 17, 0.1) 47%, rgba(17, 17, 17, 0.1) 53%, transparent 53%);
    mix-blend-mode: multiply;
    opacity: 0.68;
    animation: editorialAvatarDrift 8s ease-in-out infinite;
}

body[data-style="editorial"] .btn,
body:not([data-style]) .btn {
    border-radius: 6px;
    font-size: 0.95rem;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    padding: 0.74rem 1.24rem;
}

body[data-style="editorial"] .btn-primary,
body:not([data-style]) .btn-primary {
    background: var(--text-primary);
    border-color: var(--text-primary);
    color: var(--bg-primary);
    box-shadow: none;
}

body[data-style="editorial"] .btn-primary:hover,
body:not([data-style]) .btn-primary:hover {
    background: var(--text-secondary);
    border-color: var(--text-secondary);
    box-shadow: none;
}

body[data-style="editorial"] .btn-secondary,
body:not([data-style]) .btn-secondary {
    border-color: rgba(255, 245, 232, 0.78);
    color: #f6f0e5;
}

body[data-style="editorial"] .btn-secondary:hover,
body:not([data-style]) .btn-secondary:hover {
    background: #f6f0e5;
    color: #211b16;
}

body[data-style="editorial"] .section-title,
body:not([data-style]) .section-title {
    color: var(--text-primary);
    font-size: clamp(2.1rem, 3.8vw, 3.1rem);
    margin-bottom: 2.2rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body[data-style="editorial"] .section-title::after,
body:not([data-style]) .section-title::after {
    width: 72px;
    height: 2px;
    border-radius: 2px;
    background: var(--text-primary);
}

body[data-style="editorial"] .about,
body[data-style="editorial"] .portfolio,
body[data-style="editorial"] .research,
body[data-style="editorial"] .skills,
body[data-style="editorial"] .contact,
body[data-style="editorial"] .project-post,
body[data-style="editorial"] .footer,
body:not([data-style]) .about,
body:not([data-style]) .portfolio,
body:not([data-style]) .research,
body:not([data-style]) .skills,
body:not([data-style]) .contact,
body:not([data-style]) .project-post,
body:not([data-style]) .footer {
    background:
        radial-gradient(circle at 92% 10%, rgba(20, 20, 20, 0.045) 0%, rgba(20, 20, 20, 0) 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(239, 239, 236, 0.28) 100%);
    background-repeat: no-repeat;
}

body[data-style="editorial"] .about-text,
body[data-style="editorial"] .portfolio-controls,
body[data-style="editorial"] .portfolio-item,
body[data-style="editorial"] .research-item,
body[data-style="editorial"] .skills-category,
body[data-style="editorial"] .contact-info,
body[data-style="editorial"] .contact-form,
body[data-style="editorial"] .post-article,
body[data-style="editorial"] .stat,
body:not([data-style]) .about-text,
body:not([data-style]) .portfolio-controls,
body:not([data-style]) .portfolio-item,
body:not([data-style]) .research-item,
body:not([data-style]) .skills-category,
body:not([data-style]) .contact-info,
body:not([data-style]) .contact-form,
body:not([data-style]) .post-article,
body:not([data-style]) .stat {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-elevated);
    box-shadow: none;
}

body[data-style="editorial"] .portfolio-item:hover,
body[data-style="editorial"] .research-item:hover,
body:not([data-style]) .portfolio-item:hover,
body:not([data-style]) .research-item:hover {
    transform: translateY(-3px);
    box-shadow: none;
}

body[data-style="editorial"] .portfolio-overlay,
body:not([data-style]) .portfolio-overlay {
    background: linear-gradient(0deg, rgba(12, 12, 12, 0.84) 0%, rgba(12, 12, 12, 0.18) 100%);
}

body[data-style="editorial"] .about-text p,
body[data-style="editorial"] .research-description,
body[data-style="editorial"] .post-summary,
body:not([data-style]) .about-text p,
body:not([data-style]) .research-description,
body:not([data-style]) .post-summary {
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.84;
}

body[data-style="editorial"] .filter-btn,
body[data-style="editorial"] .pagination-btn,
body[data-style="editorial"] .pagination-number,
body[data-style="editorial"] .research-link,
body[data-style="editorial"] .social-link,
body:not([data-style]) .filter-btn,
body:not([data-style]) .pagination-btn,
body:not([data-style]) .pagination-number,
body:not([data-style]) .research-link,
body:not([data-style]) .social-link {
    border-radius: 8px;
    border-color: var(--border-color);
}

body[data-style="editorial"] .filter-btn:hover,
body[data-style="editorial"] .filter-btn.active,
body[data-style="editorial"] .pagination-btn:hover:not(:disabled),
body[data-style="editorial"] .pagination-number:hover,
body[data-style="editorial"] .pagination-number.active,
body[data-style="editorial"] .research-link:hover,
body:not([data-style]) .filter-btn:hover,
body:not([data-style]) .filter-btn.active,
body:not([data-style]) .pagination-btn:hover:not(:disabled),
body:not([data-style]) .pagination-number:hover,
body:not([data-style]) .pagination-number.active,
body:not([data-style]) .research-link:hover {
    background: var(--text-primary);
    border-color: var(--text-primary);
    color: var(--bg-primary);
}

body[data-style="editorial"] .post-content,
body:not([data-style]) .post-content {
    color: var(--text-primary);
    max-width: 72ch;
    line-height: 1.92;
    font-size: 1.1rem;
}

body[data-style="editorial"] .post-content p,
body[data-style="editorial"] .post-content ul,
body[data-style="editorial"] .post-content ol,
body:not([data-style]) .post-content p,
body:not([data-style]) .post-content ul,
body:not([data-style]) .post-content ol {
    max-width: 70ch;
}

body[data-style="editorial"] .post-content h2,
body[data-style="editorial"] .post-content h3,
body[data-style="editorial"] .post-content h4,
body:not([data-style]) .post-content h2,
body:not([data-style]) .post-content h3,
body:not([data-style]) .post-content h4 {
    border-left: 3px solid var(--text-primary);
    color: var(--text-primary);
}

body[data-style="editorial"] .post-content a,
body:not([data-style]) .post-content a {
    color: #1b4468;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.14em;
}

body[data-style="editorial"][data-theme="dark"] .hero,
body:not([data-style])[data-theme="dark"] .hero {
    background:
        linear-gradient(
            118deg,
            rgba(241, 240, 236, 0) 24%,
            rgba(241, 240, 236, 0.085) 24%,
            rgba(241, 240, 236, 0.085) 36%,
            rgba(241, 240, 236, 0) 36%
        ),
        linear-gradient(164deg, #0f1011 0%, #191a1c 56%, #26282b 100%);
}

body[data-style="editorial"][data-theme="dark"] .about,
body[data-style="editorial"][data-theme="dark"] .portfolio,
body[data-style="editorial"][data-theme="dark"] .research,
body[data-style="editorial"][data-theme="dark"] .skills,
body[data-style="editorial"][data-theme="dark"] .contact,
body[data-style="editorial"][data-theme="dark"] .project-post,
body[data-style="editorial"][data-theme="dark"] .footer,
body:not([data-style])[data-theme="dark"] .about,
body:not([data-style])[data-theme="dark"] .portfolio,
body:not([data-style])[data-theme="dark"] .research,
body:not([data-style])[data-theme="dark"] .skills,
body:not([data-style])[data-theme="dark"] .contact,
body:not([data-style])[data-theme="dark"] .project-post,
body:not([data-style])[data-theme="dark"] .footer {
    background:
        radial-gradient(circle at 88% 14%, rgba(241, 240, 236, 0.07) 0%, rgba(241, 240, 236, 0) 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(0, 0, 0, 0.14) 100%);
    background-repeat: no-repeat;
}

body[data-style="editorial"][data-theme="dark"] .hero-bg-animation,
body:not([data-style])[data-theme="dark"] .hero-bg-animation {
    background:
        linear-gradient(145deg, #1e1f22 0%, #16171a 100%),
        repeating-linear-gradient(0deg, rgba(241, 240, 236, 0.1) 0 1px, transparent 1px 18px),
        repeating-linear-gradient(90deg, rgba(241, 240, 236, 0.08) 0 1px, transparent 1px 18px);
}

body[data-style="editorial"][data-theme="dark"] .hero-bg-animation::before,
body:not([data-style])[data-theme="dark"] .hero-bg-animation::before {
    border-color: rgba(241, 240, 236, 0.26);
    background:
        linear-gradient(135deg, transparent 45%, rgba(241, 240, 236, 0.18) 45%, rgba(241, 240, 236, 0.18) 55%, transparent 55%),
        linear-gradient(-45deg, transparent 47%, rgba(241, 240, 236, 0.11) 47%, rgba(241, 240, 236, 0.11) 53%, transparent 53%);
    mix-blend-mode: screen;
    opacity: 0.56;
}

@keyframes editorialAvatarDrift {
    0%,
    100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(-6px, 5px);
    }
}

body[data-style="editorial"][data-theme="dark"] .post-content a,
body:not([data-style])[data-theme="dark"] .post-content a {
    color: #9fc2e3;
}

body[data-style="editorial"][data-theme="dark"] .btn-secondary,
body:not([data-style])[data-theme="dark"] .btn-secondary {
    border-color: rgba(241, 240, 236, 0.62);
}

body[data-style="editorial"][data-theme="dark"] .btn-secondary:hover,
body:not([data-style])[data-theme="dark"] .btn-secondary:hover {
    background: rgba(241, 240, 236, 0.96);
    color: #1f1a16;
}

/* iOS-inspired editorial variant */
body[data-style="editorial"],
body:not([data-style]) {
    --bg-primary: #efedf3;
    --bg-secondary: #f4f2f7;
    --bg-tertiary: #e3e0e8;
    --bg-elevated: rgba(244, 241, 248, 0.66);
    --text-primary: #111114;
    --text-secondary: #4e4e56;
    --text-tertiary: #6e6e73;
    --accent-primary: #007aff;
    --accent-secondary: #5ac8fa;
    --accent-tertiary: #34c759;
    --border-color: rgba(92, 92, 108, 0.18);
    --shadow-light: rgba(19, 24, 36, 0.08);
    --shadow-medium: rgba(19, 24, 36, 0.16);
    --navbar-bg: rgba(237, 234, 242, 0.74);
    --navbar-bg-scrolled: rgba(237, 234, 242, 0.9);
    --navbar-shadow: rgba(34, 39, 55, 0.12);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', sans-serif;
    letter-spacing: -0.01em;
    background:
        radial-gradient(circle at 12% 8%, rgba(255, 176, 201, 0.18) 0%, rgba(255, 176, 201, 0) 32%),
        radial-gradient(circle at 84% 14%, rgba(255, 193, 136, 0.16) 0%, rgba(255, 193, 136, 0) 30%),
        radial-gradient(circle at 50% -12%, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 42%),
        radial-gradient(circle at 76% 78%, rgba(197, 204, 229, 0.22) 0%, rgba(197, 204, 229, 0) 28%),
        linear-gradient(180deg, #f3f1f5 0%, #ece7ee 40%, #e5e1e9 100%);
    background-repeat: no-repeat;
    color: var(--text-primary);
}

body[data-style="editorial"][data-theme="dark"],
body:not([data-style])[data-theme="dark"] {
    --bg-primary: #0b0b0f;
    --bg-secondary: #15151a;
    --bg-tertiary: #202027;
    --bg-elevated: rgba(28, 28, 30, 0.8);
    --text-primary: #f5f5f7;
    --text-secondary: #c7c7cc;
    --text-tertiary: #8e8e93;
    --accent-primary: #0a84ff;
    --accent-secondary: #64d2ff;
    --accent-tertiary: #30d158;
    --border-color: rgba(255, 255, 255, 0.12);
    --shadow-light: rgba(0, 0, 0, 0.2);
    --shadow-medium: rgba(0, 0, 0, 0.34);
    --navbar-bg: rgba(16, 16, 20, 0.72);
    --navbar-bg-scrolled: rgba(16, 16, 20, 0.88);
    --navbar-shadow: rgba(0, 0, 0, 0.28);
    background:
        radial-gradient(circle at 12% 12%, rgba(10, 132, 255, 0.18) 0%, rgba(10, 132, 255, 0) 24%),
        radial-gradient(circle at 86% 16%, rgba(48, 209, 88, 0.12) 0%, rgba(48, 209, 88, 0) 22%),
        radial-gradient(circle at 78% 84%, rgba(100, 210, 255, 0.1) 0%, rgba(100, 210, 255, 0) 20%),
        linear-gradient(180deg, #0a0a0c 0%, #141419 100%);
    background-repeat: no-repeat;
}

body[data-style="editorial"] h1,
body[data-style="editorial"] h2,
body[data-style="editorial"] h3,
body[data-style="editorial"] .section-title,
body[data-style="editorial"] .hero-name,
body[data-style="editorial"] .post-title,
body[data-style="editorial"] .research-title,
body[data-style="editorial"] .about-intro,
body[data-style="editorial"] .nav-logo a,
body:not([data-style]) h1,
body:not([data-style]) h2,
body:not([data-style]) h3,
body:not([data-style]) .section-title,
body:not([data-style]) .hero-name,
body:not([data-style]) .post-title,
body:not([data-style]) .research-title,
body:not([data-style]) .about-intro,
body:not([data-style]) .nav-logo a {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', sans-serif;
    font-weight: 600;
    letter-spacing: -0.02em;
}

body[data-style="editorial"] .nav-link,
body[data-style="editorial"] .style-select,
body[data-style="editorial"] .btn,
body[data-style="editorial"] .project-category,
body[data-style="editorial"] .research-date,
body:not([data-style]) .nav-link,
body:not([data-style]) .style-select,
body:not([data-style]) .btn,
body:not([data-style]) .project-category,
body:not([data-style]) .research-date {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
}

body[data-style="editorial"] .navbar,
body:not([data-style]) .navbar {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.62) inset, 0 10px 30px var(--navbar-shadow);
}

body[data-style="editorial"] .nav-container,
body:not([data-style]) .nav-container {
    height: 76px;
}

body[data-style="editorial"] .nav-menu,
body:not([data-style]) .nav-menu {
    gap: 0.65rem;
}

body[data-style="editorial"] .nav-link,
body:not([data-style]) .nav-link {
    color: var(--text-primary);
    font-size: 0.86rem;
    letter-spacing: -0.01em;
    text-transform: none;
    padding: 0.58rem 0.95rem;
    border-radius: 999px;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

body[data-style="editorial"] .nav-link::after,
body:not([data-style]) .nav-link::after {
    display: none;
}

body[data-style="editorial"] .nav-link:hover,
body[data-style="editorial"] .nav-link.active,
body:not([data-style]) .nav-link:hover,
body:not([data-style]) .nav-link.active {
    background: rgba(245, 243, 250, 0.48);
    color: var(--accent-primary);
    box-shadow: 0 6px 14px rgba(0, 122, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.42);
    transform: translateY(-1px);
}

body[data-style="editorial"] .style-select,
body[data-style="editorial"] .theme-toggle,
body:not([data-style]) .style-select,
body:not([data-style]) .theme-toggle {
    height: 42px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: rgba(244, 241, 248, 0.58);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 10px 22px rgba(18, 22, 34, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.46);
}

body[data-style="editorial"] .style-select:hover,
body[data-style="editorial"] .style-select:focus,
body[data-style="editorial"] .form-group input:focus,
body[data-style="editorial"] .form-group textarea:focus,
body:not([data-style]) .style-select:hover,
body:not([data-style]) .style-select:focus,
body:not([data-style]) .form-group input:focus,
body:not([data-style]) .form-group textarea:focus {
    border-color: rgba(0, 122, 255, 0.5);
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.12);
}

body[data-style="editorial"][data-theme="dark"] .style-select,
body[data-style="editorial"][data-theme="dark"] .theme-toggle,
body:not([data-style])[data-theme="dark"] .style-select,
body:not([data-style])[data-theme="dark"] .theme-toggle {
    background: rgba(28, 28, 30, 0.82);
}

body[data-style="editorial"][data-theme="dark"] .style-select:hover,
body[data-style="editorial"][data-theme="dark"] .style-select:focus,
body[data-style="editorial"][data-theme="dark"] .form-group input:focus,
body[data-style="editorial"][data-theme="dark"] .form-group textarea:focus,
body:not([data-style])[data-theme="dark"] .style-select:hover,
body:not([data-style])[data-theme="dark"] .style-select:focus,
body:not([data-style])[data-theme="dark"] .form-group input:focus,
body:not([data-style])[data-theme="dark"] .form-group textarea:focus {
    box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.18);
}

body[data-style="editorial"] .hero,
body:not([data-style]) .hero {
    min-height: 95vh;
    background:
        radial-gradient(circle at 14% 18%, rgba(255, 191, 210, 0.13) 0%, rgba(255, 191, 210, 0) 30%),
        radial-gradient(circle at 82% 24%, rgba(255, 205, 156, 0.12) 0%, rgba(255, 205, 156, 0) 26%),
        linear-gradient(180deg, rgba(241, 237, 245, 0.9) 0%, rgba(224, 220, 231, 0.96) 100%);
    border-bottom: 1px solid var(--border-color);
}

body[data-style="editorial"] .hero::before,
body[data-style="editorial"] .hero::after,
body:not([data-style]) .hero::before,
body:not([data-style]) .hero::after {
    display: block;
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

body[data-style="editorial"] .hero::before,
body:not([data-style]) .hero::before {
    background:
        radial-gradient(circle at 88% 22%, rgba(255, 255, 255, 0.48), transparent 28%),
        radial-gradient(circle at 14% 78%, rgba(207, 217, 239, 0.2), transparent 28%);
    opacity: 0.68;
}

body[data-style="editorial"] .hero::after,
body:not([data-style]) .hero::after {
    background: linear-gradient(130deg, rgba(255, 255, 255, 0.11) 0%, transparent 35%, rgba(255, 255, 255, 0.04) 58%, transparent 74%);
}

body[data-style="editorial"] .hero-name,
body:not([data-style]) .hero-name {
    color: var(--text-primary);
    line-height: 1.02;
    letter-spacing: -0.05em;
}

body[data-style="editorial"] .hero-title,
body:not([data-style]) .hero-title {
    color: var(--text-secondary);
    font-size: 1rem;
    letter-spacing: 0;
}

body[data-style="editorial"] .typewriter-container,
body:not([data-style]) .typewriter-container {
    background: rgba(244, 241, 248, 0.56);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-primary);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

body[data-style="editorial"] .hero-description,
body:not([data-style]) .hero-description {
    color: var(--text-secondary);
    font-size: 1.06rem;
    line-height: 1.85;
    max-width: 60ch;
}

body[data-style="editorial"] .nav-logo a,
body[data-style="editorial"] .portfolio-link,
body:not([data-style]) .nav-logo a,
body:not([data-style]) .portfolio-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: linear-gradient(165deg, rgba(245, 242, 248, 0.78) 0%, rgba(233, 231, 240, 0.7) 100%);
    color: var(--text-primary);
    box-shadow: 0 9px 20px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.44);
}

body[data-style="editorial"] .hero-bg-animation,
body:not([data-style]) .hero-bg-animation {
    width: min(72vw, 360px);
    height: min(72vw, 360px);
    border-radius: 38px;
    border: 1px solid rgba(92, 92, 108, 0.16);
    background:
        linear-gradient(150deg, rgba(242, 239, 246, 0.76) 0%, rgba(223, 226, 236, 0.74) 100%),
        radial-gradient(circle at 28% 28%, rgba(255, 193, 212, 0.16) 0%, transparent 36%),
        radial-gradient(circle at 76% 72%, rgba(255, 206, 156, 0.14) 0%, transparent 34%);
    box-shadow:
        0 22px 44px rgba(18, 23, 36, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    animation: iosFloat 11s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

body[data-style="editorial"] .hero-bg-animation::before,
body:not([data-style]) .hero-bg-animation::before {
    content: '';
    position: absolute;
    inset: 14px;
    border-radius: 28px;
    border: 1px solid rgba(92, 92, 108, 0.14);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0.14) 100%),
        linear-gradient(135deg, rgba(255, 196, 212, 0.1) 0%, transparent 58%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

body[data-style="editorial"] .hero-bg-animation::after,
body:not([data-style]) .hero-bg-animation::after {
    content: '';
    position: absolute;
    inset: 24% 18%;
    border-radius: 24px;
    border: 1px solid rgba(255, 199, 164, 0.14);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
}

body[data-style="editorial"] .btn,
body:not([data-style]) .btn {
    border-radius: 999px;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
    text-transform: none;
    padding: 0.82rem 1.28rem;
}

body[data-style="editorial"] .btn-primary,
body:not([data-style]) .btn-primary {
    background: linear-gradient(135deg, #0a84ff 0%, #0066de 100%);
    border-color: #006fef;
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(0, 122, 255, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

body[data-style="editorial"] .btn-primary:hover,
body:not([data-style]) .btn-primary:hover {
    background: linear-gradient(135deg, #0a7bf0 0%, #0059c2 100%);
    border-color: #005fca;
    box-shadow: 0 18px 32px rgba(0, 122, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

body[data-style="editorial"] .btn-secondary,
body:not([data-style]) .btn-secondary {
    background: rgba(244, 241, 248, 0.52);
    border-color: var(--border-color);
    color: var(--text-primary);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

body[data-style="editorial"] .btn-secondary:hover,
body:not([data-style]) .btn-secondary:hover {
    background: rgba(248, 246, 252, 0.7);
    color: var(--text-primary);
}

body[data-style="editorial"] .section-title,
body:not([data-style]) .section-title {
    color: var(--text-primary);
    font-size: clamp(2rem, 3.6vw, 3rem);
    margin-bottom: 2rem;
    text-transform: none;
    letter-spacing: -0.04em;
}

body[data-style="editorial"] .section-title::after,
body:not([data-style]) .section-title::after {
    width: 88px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
}

body[data-style="editorial"] .about,
body[data-style="editorial"] .portfolio,
body[data-style="editorial"] .research,
body[data-style="editorial"] .skills,
body[data-style="editorial"] .contact,
body[data-style="editorial"] .project-post,
body[data-style="editorial"] .footer,
body:not([data-style]) .about,
body:not([data-style]) .portfolio,
body:not([data-style]) .research,
body:not([data-style]) .skills,
body:not([data-style]) .contact,
body:not([data-style]) .project-post,
body:not([data-style]) .footer {
    background:
        radial-gradient(circle at 90% 10%, rgba(255, 190, 142, 0.14) 0%, rgba(255, 190, 142, 0) 34%),
        radial-gradient(circle at 12% 80%, rgba(255, 206, 224, 0.11) 0%, rgba(255, 206, 224, 0) 30%),
        radial-gradient(circle at 52% -12%, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 42%),
        linear-gradient(180deg, rgba(238, 235, 243, 0.74) 0%, rgba(226, 223, 233, 0.88) 100%);
    background-repeat: no-repeat;
}

body[data-style="editorial"] .about-text,
body[data-style="editorial"] .portfolio-controls,
body[data-style="editorial"] .portfolio-item,
body[data-style="editorial"] .research-item,
body[data-style="editorial"] .skills-category,
body[data-style="editorial"] .contact-info,
body[data-style="editorial"] .contact-form,
body[data-style="editorial"] .post-article,
body[data-style="editorial"] .stat,
body:not([data-style]) .about-text,
body:not([data-style]) .portfolio-controls,
body:not([data-style]) .portfolio-item,
body:not([data-style]) .research-item,
body:not([data-style]) .skills-category,
body:not([data-style]) .contact-info,
body:not([data-style]) .contact-form,
body:not([data-style]) .post-article,
body:not([data-style]) .stat {
    border: 1px solid var(--border-color);
    border-radius: 28px;
    background: linear-gradient(165deg, rgba(242, 239, 246, 0.74) 0%, rgba(229, 228, 237, 0.7) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 16px 34px var(--shadow-light), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

body[data-style="editorial"] .about-text,
body:not([data-style]) .about-text {
    padding: 2.25rem 2.35rem;
}

body[data-style="editorial"] .about-text p,
body[data-style="editorial"] .research-description,
body[data-style="editorial"] .post-summary,
body:not([data-style]) .about-text p,
body:not([data-style]) .research-description,
body:not([data-style]) .post-summary {
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.9;
}

body[data-style="editorial"] .about-intro,
body:not([data-style]) .about-intro {
    color: var(--accent-primary);
}

body[data-style="editorial"] .portfolio-controls,
body:not([data-style]) .portfolio-controls {
    padding: 1rem 1.1rem;
}

body[data-style="editorial"] .filter-btn,
body[data-style="editorial"] .pagination-btn,
body[data-style="editorial"] .pagination-number,
body[data-style="editorial"] .research-link,
body[data-style="editorial"] .social-link,
body:not([data-style]) .filter-btn,
body:not([data-style]) .pagination-btn,
body:not([data-style]) .pagination-number,
body:not([data-style]) .research-link,
body:not([data-style]) .social-link {
    border-radius: 999px;
    border-color: var(--border-color);
    background: rgba(240, 236, 245, 0.56);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

body[data-style="editorial"] .filter-btn:hover,
body[data-style="editorial"] .filter-btn.active,
body[data-style="editorial"] .pagination-btn:hover:not(:disabled),
body[data-style="editorial"] .pagination-number:hover,
body[data-style="editorial"] .pagination-number.active,
body[data-style="editorial"] .research-link:hover,
body:not([data-style]) .filter-btn:hover,
body:not([data-style]) .filter-btn.active,
body:not([data-style]) .pagination-btn:hover:not(:disabled),
body:not([data-style]) .pagination-number:hover,
body:not([data-style]) .pagination-number.active,
body:not([data-style]) .research-link:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #ffffff;
}

body[data-style="editorial"] .portfolio-item,
body[data-style="editorial"] .research-item,
body:not([data-style]) .portfolio-item,
body:not([data-style]) .research-item {
    overflow: hidden;
}

body[data-style="editorial"] .portfolio-item:hover,
body[data-style="editorial"] .research-item:hover,
body:not([data-style]) .portfolio-item:hover,
body:not([data-style]) .research-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 44px var(--shadow-medium);
}

body[data-style="editorial"] .portfolio-overlay,
body:not([data-style]) .portfolio-overlay {
    background: linear-gradient(180deg, rgba(0, 122, 255, 0.18) 0%, rgba(0, 0, 0, 0.42) 100%);
}

body[data-style="editorial"] .post-content,
body:not([data-style]) .post-content {
    color: var(--text-primary);
    max-width: 72ch;
    line-height: 1.95;
    font-size: 1.08rem;
}

body[data-style="editorial"] .post-content p,
body[data-style="editorial"] .post-content ul,
body[data-style="editorial"] .post-content ol,
body:not([data-style]) .post-content p,
body:not([data-style]) .post-content ul,
body:not([data-style]) .post-content ol {
    max-width: 70ch;
}

body[data-style="editorial"] .post-content h2,
body[data-style="editorial"] .post-content h3,
body[data-style="editorial"] .post-content h4,
body:not([data-style]) .post-content h2,
body:not([data-style]) .post-content h3,
body:not([data-style]) .post-content h4 {
    border-left: 3px solid rgba(0, 122, 255, 0.4);
    color: var(--text-primary);
}

body[data-style="editorial"] .post-content a,
body:not([data-style]) .post-content a {
    color: var(--accent-primary);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.14em;
}

body[data-style="editorial"] .post-content blockquote,
body:not([data-style]) .post-content blockquote {
    border-left: 3px solid rgba(0, 122, 255, 0.25);
    background: rgba(0, 122, 255, 0.06);
    border-radius: 18px;
}

body[data-style="editorial"] .hero-bg-animation,
body:not([data-style]) .hero-bg-animation {
    animation: iosFloat 11s ease-in-out infinite;
}

body[data-style="editorial"][data-theme="dark"] .hero,
body:not([data-style])[data-theme="dark"] .hero {
    background:
        radial-gradient(circle at 14% 18%, rgba(10, 132, 255, 0.12) 0%, rgba(10, 132, 255, 0) 34%),
        radial-gradient(circle at 82% 24%, rgba(48, 209, 88, 0.07) 0%, rgba(48, 209, 88, 0) 30%),
        linear-gradient(180deg, rgba(18, 18, 22, 0.95) 0%, rgba(11, 11, 15, 1) 100%);
}

body[data-style="editorial"][data-theme="dark"] .hero::before,
body:not([data-style])[data-theme="dark"] .hero::before {
    background:
        radial-gradient(circle at 88% 22%, rgba(255, 255, 255, 0.16), transparent 36%),
        radial-gradient(circle at 14% 78%, rgba(154, 170, 209, 0.14), transparent 34%);
    opacity: 0.48;
}

body[data-style="editorial"][data-theme="dark"] .hero::after,
body:not([data-style])[data-theme="dark"] .hero::after {
    background: linear-gradient(130deg, rgba(255, 255, 255, 0.06) 0%, transparent 40%, rgba(255, 255, 255, 0.03) 62%, transparent 78%);
}

body[data-style="editorial"][data-theme="dark"] .about,
body[data-style="editorial"][data-theme="dark"] .portfolio,
body[data-style="editorial"][data-theme="dark"] .research,
body[data-style="editorial"][data-theme="dark"] .skills,
body[data-style="editorial"][data-theme="dark"] .contact,
body[data-style="editorial"][data-theme="dark"] .project-post,
body[data-style="editorial"][data-theme="dark"] .footer,
body:not([data-style])[data-theme="dark"] .about,
body:not([data-style])[data-theme="dark"] .portfolio,
body:not([data-style])[data-theme="dark"] .research,
body:not([data-style])[data-theme="dark"] .skills,
body:not([data-style])[data-theme="dark"] .contact,
body:not([data-style])[data-theme="dark"] .project-post,
body:not([data-style])[data-theme="dark"] .footer {
    background:
        radial-gradient(circle at 88% 12%, rgba(10, 132, 255, 0.06) 0%, rgba(10, 132, 255, 0) 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    background-repeat: no-repeat;
}

body[data-style="editorial"][data-theme="dark"] .nav-link:hover,
body[data-style="editorial"][data-theme="dark"] .nav-link.active,
body:not([data-style])[data-theme="dark"] .nav-link:hover,
body:not([data-style])[data-theme="dark"] .nav-link.active {
    background: rgba(10, 132, 255, 0.18);
    color: #ffffff;
}

body[data-style="editorial"][data-theme="dark"] .nav-logo a,
body[data-style="editorial"][data-theme="dark"] .portfolio-link,
body:not([data-style])[data-theme="dark"] .nav-logo a,
body:not([data-style])[data-theme="dark"] .portfolio-link {
    background: rgba(28, 28, 30, 0.82);
    color: #ffffff;
}

body[data-style="editorial"][data-theme="dark"] .hero-bg-animation,
body:not([data-style])[data-theme="dark"] .hero-bg-animation {
    border-color: rgba(255, 255, 255, 0.12);
    background:
        linear-gradient(145deg, rgba(40, 40, 46, 0.96) 0%, rgba(20, 20, 24, 0.98) 100%),
    radial-gradient(circle at 24% 28%, rgba(10, 132, 255, 0.18) 0%, transparent 34%),
    radial-gradient(circle at 74% 72%, rgba(48, 209, 88, 0.12) 0%, transparent 32%);
}

body[data-style="editorial"][data-theme="dark"] .hero-bg-animation::before,
body:not([data-style])[data-theme="dark"] .hero-bg-animation::before {
    border-color: rgba(255, 255, 255, 0.1);
    background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.015) 100%),
    linear-gradient(135deg, rgba(10, 132, 255, 0.12) 0%, transparent 56%);
}

body[data-style="editorial"][data-theme="dark"] .hero-bg-animation::after,
body:not([data-style])[data-theme="dark"] .hero-bg-animation::after {
    border-color: rgba(10, 132, 255, 0.2);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
}

body[data-style="editorial"][data-theme="dark"] .typewriter-container,
body:not([data-style])[data-theme="dark"] .typewriter-container {
    background: rgba(28, 28, 30, 0.82);
    border-color: rgba(255, 255, 255, 0.12);
    color: #f5f5f7;
}

body[data-style="editorial"][data-theme="dark"] .btn-secondary,
body:not([data-style])[data-theme="dark"] .btn-secondary {
    background: rgba(28, 28, 30, 0.72);
    border-color: rgba(255, 255, 255, 0.14);
    color: #f5f5f7;
}

body[data-style="editorial"][data-theme="dark"] .btn-secondary:hover,
body:not([data-style])[data-theme="dark"] .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.9);
    color: #111114;
}

body[data-style="editorial"][data-theme="dark"] .about-text,
body[data-style="editorial"][data-theme="dark"] .portfolio-controls,
body[data-style="editorial"][data-theme="dark"] .portfolio-item,
body[data-style="editorial"][data-theme="dark"] .research-item,
body[data-style="editorial"][data-theme="dark"] .skills-category,
body[data-style="editorial"][data-theme="dark"] .contact-info,
body[data-style="editorial"][data-theme="dark"] .contact-form,
body[data-style="editorial"][data-theme="dark"] .post-article,
body[data-style="editorial"][data-theme="dark"] .stat,
body:not([data-style])[data-theme="dark"] .about-text,
body:not([data-style])[data-theme="dark"] .portfolio-controls,
body:not([data-style])[data-theme="dark"] .portfolio-item,
body:not([data-style])[data-theme="dark"] .research-item,
body:not([data-style])[data-theme="dark"] .skills-category,
body:not([data-style])[data-theme="dark"] .contact-info,
body:not([data-style])[data-theme="dark"] .contact-form,
body:not([data-style])[data-theme="dark"] .post-article,
body:not([data-style])[data-theme="dark"] .stat {
    background: rgba(28, 28, 30, 0.72);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

body[data-style="editorial"][data-theme="dark"] .filter-btn,
body[data-style="editorial"][data-theme="dark"] .pagination-btn,
body[data-style="editorial"][data-theme="dark"] .pagination-number,
body[data-style="editorial"][data-theme="dark"] .research-link,
body[data-style="editorial"][data-theme="dark"] .social-link,
body:not([data-style])[data-theme="dark"] .filter-btn,
body:not([data-style])[data-theme="dark"] .pagination-btn,
body:not([data-style])[data-theme="dark"] .pagination-number,
body:not([data-style])[data-theme="dark"] .research-link,
body:not([data-style])[data-theme="dark"] .social-link {
    background: rgba(28, 28, 30, 0.78);
    border-color: rgba(255, 255, 255, 0.14);
}

body[data-style="editorial"][data-theme="dark"] .filter-btn:hover,
body[data-style="editorial"][data-theme="dark"] .filter-btn.active,
body[data-style="editorial"][data-theme="dark"] .pagination-btn:hover:not(:disabled),
body[data-style="editorial"][data-theme="dark"] .pagination-number:hover,
body[data-style="editorial"][data-theme="dark"] .pagination-number.active,
body[data-style="editorial"][data-theme="dark"] .research-link:hover,
body:not([data-style])[data-theme="dark"] .filter-btn:hover,
body:not([data-style])[data-theme="dark"] .filter-btn.active,
body:not([data-style])[data-theme="dark"] .pagination-btn:hover:not(:disabled),
body:not([data-style])[data-theme="dark"] .pagination-number:hover,
body:not([data-style])[data-theme="dark"] .pagination-number.active,
body:not([data-style])[data-theme="dark"] .research-link:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #ffffff;
}

body[data-style="editorial"][data-theme="dark"] .portfolio-overlay,
body:not([data-style])[data-theme="dark"] .portfolio-overlay {
    background: linear-gradient(180deg, rgba(10, 132, 255, 0.22) 0%, rgba(0, 0, 0, 0.56) 100%);
}

body[data-style="editorial"][data-theme="dark"] .post-content a,
body:not([data-style])[data-theme="dark"] .post-content a {
    color: var(--accent-secondary);
}

body[data-style="editorial"][data-theme="dark"] .post-content blockquote,
body:not([data-style])[data-theme="dark"] .post-content blockquote {
    background: rgba(10, 132, 255, 0.12);
    border-left-color: rgba(10, 132, 255, 0.4);
}

@keyframes iosFloat {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-10px) scale(1.01);
    }
}

@media (max-width: 768px) {
    body[data-style="editorial"] .nav-menu,
    body:not([data-style]) .nav-menu {
        top: 78px;
        left: 16px;
        right: 16px;
        padding: 0.85rem;
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.82);
        border: 1px solid var(--border-color);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12);
    }

    body[data-style="editorial"][data-theme="dark"] .nav-menu,
    body:not([data-style])[data-theme="dark"] .nav-menu {
        background: rgba(28, 28, 30, 0.88);
    }

    body[data-style="editorial"] .hero,
    body:not([data-style]) .hero {
        padding-top: 96px;
    }

    body[data-style="editorial"] .about-text,
    body:not([data-style]) .about-text,
    body[data-style="editorial"] .contact-info,
    body[data-style="editorial"] .contact-form,
    body[data-style="editorial"] .skills-category,
    body:not([data-style]) .contact-info,
    body:not([data-style]) .contact-form,
    body:not([data-style]) .skills-category {
        padding: 1.35rem;
        border-radius: 22px;
    }

    body[data-style="editorial"] .hero-bg-animation,
    body:not([data-style]) .hero-bg-animation {
        width: min(76vw, 300px);
        height: min(76vw, 300px);
    }
}

/* Project page spacing harmonization across themes */
body[data-style="minimal"] .project-post,
body[data-style="technical"] .project-post,
body[data-style="editorial"] .project-post,
body:not([data-style]) .project-post {
    --project-text-width: 70ch;
    --project-image-width: 76ch;
    padding: 124px 0 94px;
}

.project-post .container {
    padding-inline: clamp(28px, 4vw, 68px);
}

body[data-style="minimal"] .post-article,
body[data-style="technical"] .post-article,
body[data-style="editorial"] .post-article,
body:not([data-style]) .post-article {
    padding: clamp(1.85rem, 2.8vw, 2.7rem);
}

.project-post .post-content {
    max-width: var(--project-text-width);
    margin-inline: auto;
}

.project-post .project-image-container {
    width: min(100%, var(--project-image-width));
    margin: 1.5rem auto 2rem;
}

/* Keep editorial project content centered within the article width */
body[data-style="editorial"] .post-content,
body:not([data-style]) .post-content,
body[data-style="editorial"] .post-content p,
body[data-style="editorial"] .post-content ul,
body[data-style="editorial"] .post-content ol,
body:not([data-style]) .post-content p,
body:not([data-style]) .post-content ul,
body:not([data-style]) .post-content ol {
    margin-inline: auto;
}

@media (max-width: 768px) {
    body[data-style="minimal"] .project-post,
    body[data-style="technical"] .project-post,
    body[data-style="editorial"] .project-post,
    body:not([data-style]) .project-post {
        padding: 106px 0 76px;
    }

    .project-post .container {
        padding-inline: 1.1rem;
    }

    body[data-style="minimal"] .post-article,
    body[data-style="technical"] .post-article,
    body[data-style="editorial"] .post-article,
    body:not([data-style]) .post-article {
        padding: 1.5rem;
    }
}

/* Main page project card image spacing */
.portfolio-grid .portfolio-item .portfolio-image {
    margin-top: clamp(0.45rem, 1vw, 0.8rem);
    border-radius: 14px;
}

.portfolio-grid .portfolio-item .portfolio-image img,
.portfolio-grid .portfolio-item .portfolio-overlay {
    border-radius: inherit;
}