@font-face {
    font-family: "Open Sauce";
    src: url("../fonts/OpenSauceSansVF.woff2") format("woff2-variations");
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "CMU Serif";
    src: url("../fonts/CMUSerif-Roman.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}:root{
    --bg: #edf0f3;
    --bg-deep: #33465c;
    --surface: #ffffff;
    --surface-alt: #f6f5f2;
    --line: rgba(69, 89, 122, 0.16);
    --text: #34465a;
    --text-strong: #1d2937;
    --muted: #6d7b92;
    --accent: #ff8a21;
    --accent-2: #c12ea7;
    --accent-3: #ffc229;
    --accent-soft: rgba(255, 194, 41, 0.14);
    --ink-on-dark: #ffffff;
    --shadow: 0 24px 60px rgba(25, 40, 59, 0.12);
    --shadow-soft: 0 18px 40px rgba(25, 40, 59, 0.08);
    --radius: 28px;
    --radius-sm: 20px;
    --gradient-accent: linear-gradient(90deg, var(--accent-2) 0%, var(--accent) 48%, var(--accent-3) 100%);
    --gradient-panel: linear-gradient(135deg, #ffffff 0%, #f5f3ef 100%);
    --gradient-dark: linear-gradient(135deg, #3d506c 0%, #33465c 55%, #263548 100%);
}*{
    box-sizing: border-box;
}.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;
}body{
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family: "Open Sauce", "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at top left, rgba(193, 46, 167, 0.08), transparent 24%),
        radial-gradient(circle at top right, rgba(255, 194, 41, 0.18), transparent 28%),
        linear-gradient(180deg, #f6f5f2 0%, #eef1f5 45%, #ffffff 100%);
    overflow-x: hidden;
}a{
    color: inherit;
}img{
    max-width: 100%;
    display: block;
}.container{
    width: min(1120px, calc(100vw - 32px));
    margin: 0 auto;
}.site-header{
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(246, 245, 242, 0.86);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(69, 89, 122, 0.1);
    box-shadow: 0 10px 28px rgba(31, 42, 58, 0.05);
}.site-header-inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 18px 0;
}.brand-link,
.nav-links{
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
}.site-nav{
    margin-left: auto;
}.brand-mark{
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0)),
        var(--gradient-dark);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    position: relative;
}.brand-mark::after{
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 10px;
    background: var(--gradient-accent);
    opacity: 0.88;
}.muted,
.meta,
.eyebrow{
    color: var(--muted);
}.nav-links a{
    text-decoration: none;
    font-weight: 650;
    color: var(--text);
    transition: color 0.2s ease, opacity 0.2s ease;
}.nav-links{
    flex-wrap: wrap;
}.nav-toggle{
    display: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-left: auto;
    padding: 0;
    border: 1px solid rgba(69, 89, 122, 0.14);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: var(--shadow-soft);
    color: var(--text-strong);
}.nav-toggle-lines{
    position: relative;
    width: 20px;
    height: 14px;
}.nav-toggle-lines::before,
.nav-toggle-lines::after,
.nav-toggle-lines span{
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
}.nav-toggle-lines::before{
    top: 0;
}.nav-toggle-lines span{
    top: 6px;
}.nav-toggle-lines::after{
    top: 12px;
}.nav-toggle[aria-expanded="true"] .nav-toggle-lines::before{
    top: 6px;
    transform: rotate(45deg);
}.nav-toggle[aria-expanded="true"] .nav-toggle-lines span{
    opacity: 0;
}.nav-toggle[aria-expanded="true"] .nav-toggle-lines::after{
    top: 6px;
    transform: rotate(-45deg);
}.nav-links a.active,
.nav-links a:hover,
.text-link{
    color: var(--text-strong);
}.section,
.article-wrap,
.admin-wrap,
.login-wrap{
    padding: 42px 0 56px;
}.news-card,
.article-shell,
.admin-card,
.login-card{
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    border-radius: 30px;
    overflow: hidden;
}.eyebrow{
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}h1,
h2,
h3,
.nav-links a,
.button,
button{
    letter-spacing: -0.03em;
}.article-shell h1,
.admin-card h1,
.login-card h1{
    margin: 12px 0 16px;
    font-size: clamp(2rem, 4vw, 4rem);
    line-height: 0.96;
    color: var(--text-strong);
}.news-card p,
.article-body,
.field input,
.field textarea,
.field select{
    font-family: "CMU Serif", Georgia, serif;
}.news-card p{
    font-size: 1.08rem;
    line-height: 1.65;
}.button,
.button-secondary,
button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 999px;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    font-weight: 700;
    text-align: center;
}.button,
button{
    background: var(--gradient-accent);
    color: #fff;
    box-shadow: 0 14px 32px rgba(193, 46, 167, 0.18);
}.button-secondary{
    background: rgba(52, 70, 90, 0.08);
    color: var(--text-strong);
    border: 1px solid rgba(52, 70, 90, 0.12);
}.button,
.button-secondary,
button,
.text-link{
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}.button:hover,
.button-secondary:hover,
button:hover,
.button:focus-visible,
.button-secondary:focus-visible,
button:focus-visible{
    transform: translateY(-2px);
}.button-secondary:hover,
.button-secondary:focus-visible{
    background: rgba(52, 70, 90, 0.12);
}.admin-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 22px;
}.section-title{
    margin: 6px 0 0;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    color: var(--text-strong);
}.news-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}.news-card{
    flex: 0 0 calc((100% - 44px) / 3);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 1)),
        var(--surface);
}.news-image{
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: #dbe3ec;
}.news-copy{
    padding: 22px;
}.badge{
    display: inline-flex;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--text-strong);
    font-size: 0.78rem;
    font-weight: 700;
}.tag-list{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}.tag-chip{
    display: inline-flex;
    align-items: center;
    padding: 0.38rem 0.8rem;
    border-radius: 999px;
    background: rgba(52, 70, 90, 0.08);
    border: 1px solid rgba(69, 89, 122, 0.12);
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
}a.tag-chip:hover,
a.tag-chip:focus-visible{
    color: var(--text-strong);
    background: rgba(52, 70, 90, 0.12);
}.tag-hero{
    margin-bottom: 24px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 30px;
    background:
        radial-gradient(circle at top right, rgba(255, 194, 41, 0.12), transparent 24%),
        linear-gradient(135deg, #ffffff 0%, #f4f1eb 100%);
    box-shadow: var(--shadow);
}.tag-hero .section-title{
    margin: 0;
}.tag-hero .tag-chip{
    margin-top: 8px;
}.tag-description{
    max-width: 62ch;
    margin: 0 0 14px;
    font-family: "CMU Serif", Georgia, serif;
    font-size: 1.08rem;
    line-height: 1.65;
}.news-card h3{
    margin: 14px 0 12px;
    font-size: 1.35rem;
    line-height: 1.12;
    color: var(--text-strong);
    text-wrap: balance;
}.article-shell,
.admin-card,
.login-card{
    padding: 30px;
}.article-shell{
    background:
        radial-gradient(circle at top right, rgba(255, 194, 41, 0.1), transparent 24%),
        linear-gradient(180deg, #ffffff 0%, #f7f5f1 100%);
}.article-cover{
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    border-radius: 24px;
    margin: 24px 0;
}.article-body{
    font-size: 1.08rem;
    line-height: 1.8;
    color: var(--text-strong);
    overflow-wrap: anywhere;
}.article-body p{
    margin: 0 0 1.1em;
}.field{
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
}.field label{
    font-weight: 700;
}.field input,
.field select,
.field textarea{
    width: 100%;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.92);
    color: var(--text-strong);
    font-size: 1rem;
}.field input[type="file"]{
    padding: 12px;
}.field textarea{
    min-height: 220px;
    resize: vertical;
}.admin-card,
.login-card{
    background:
        radial-gradient(circle at top left, rgba(193, 46, 167, 0.06), transparent 22%),
        linear-gradient(180deg, #ffffff 0%, #f8f7f4 100%);
}.admin-image-preview{
    width: min(100%, 420px);
    border-radius: 18px;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
}.checkbox-field{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-weight: 600;
    color: var(--text);
}.checkbox-field input{
    width: 18px;
    height: 18px;
    margin: 0;
}.preview-panel{
    margin-top: 34px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
}.preview-head{
    margin-bottom: 18px;
}.preview-head p{
    margin: 8px 0 0;
}.preview-article-shell{
    box-shadow: var(--shadow-soft);
}.preview-card{
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f7f5f1 100%);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}.preview-image{
    width: 100%;
    max-height: 360px;
    object-fit: cover;
}.preview-body{
    padding: 24px;
}.preview-body h2{
    margin: 14px 0 10px;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1;
    color: var(--text-strong);
}.preview-body > p{
    margin: 0 0 14px;
}.preview-content{
    margin-top: 18px;
    color: var(--text);
    line-height: 1.7;
}.preview-content p{
    margin: 0 0 1em;
}.grid-2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}.table-wrap{
    overflow-x: auto;
    margin-top: 24px;
    -webkit-overflow-scrolling: touch;
}table{
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
}th,
td{
    padding: 14px 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}.flash,
.error{
    padding: 14px 16px;
    border-radius: 16px;
    margin-bottom: 16px;
}.flash{
    background: rgba(255, 194, 41, 0.16);
    color: #7a5600;
}.error{
    background: #fdeceb;
    color: #8a241c;
}.text-link{
    font-weight: 700;
    text-decoration: none;
}.text-link:hover,
.text-link:focus-visible{
    color: var(--accent);
}.meta{
    font-size: 0.92rem;
}.site-footer{
    margin-top: 34px;
    background: #ffffff;
    color: #45597a;
    border-top: 1px solid rgba(69, 89, 122, 0.1);
}.footer-shell{
    display: grid;
    grid-template-columns: minmax(260px, 1.2fr) minmax(220px, 0.7fr) minmax(240px, 0.8fr);
    gap: 2rem;
    align-items: start;
    padding: clamp(2.4rem, 5vw, 3.5rem) 0 1.5rem;
}.footer-socials{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}.footer-socials a{
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #45597a;
    text-decoration: none;
}.footer-socials svg{
    width: 100%;
    height: 100%;
    display: block;
}.footer-bottom{
    padding: 0 0 2rem;
}.footer-bottom p{
    margin: 0;
    text-align: center;
    color: #9aa6bb;
    font-size: 0.95rem;
    line-height: 1.4;
}

@media (max-width: 1080px) {
    .container {
        width: min(1120px, calc(100vw - 24px));
    }

    .hero,
    .section,
    .article-wrap,
    .admin-wrap,
    .login-wrap {
        padding: 32px 0 44px;
    }

    .hero-copy,
    .hero-image,
    .news-card,
    .article-shell,
    .admin-card,
    .login-card,
    .cta-box,
    .tag-hero {
        border-radius: 24px;
    }

    .hero-copy,
    .cta-box,
    .article-shell,
    .admin-card,
    .login-card,
    .tag-hero {
        padding: 24px;
    }

    .news-copy,
    .preview-body {
        padding: 20px;
    }
}

@media (max-width: 920px) {
    .hero-shell,
    .grid-2,
    .news-grid {
        grid-template-columns: 1fr;
    }

    .site-header-inner,
    .cta-box {
        flex-direction: column;
        align-items: flex-start;
    }

    .site-header-inner {
        padding: 14px 0;
    }

    .brand-link {
        width: 100%;
        align-items: flex-start;
    }

    .site-nav {
        margin-left: 0;
    }

    .site-header .nav-links {
        width: 100%;
        gap: 12px 16px;
    }

    .admin-actions {
        align-items: flex-start;
    }

    .news-card {
        flex-basis: 100%;
    }
}

@media (max-width: 640px) {
    .container {
        width: min(100vw - 20px, 100%);
    }

    .site-header {
        position: static;
    }

    .brand-mark {
        width: 38px;
        height: 38px;
    }

    .nav-links a {
        font-size: 0.98rem;
    }

    .nav-toggle {
        display: inline-flex;
    }

    .site-header-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
    }

    .brand-link {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
        align-items: center;
    }

    .site-nav {
        display: none;
        width: 100%;
        margin-top: 4px;
        padding: 10px 0 4px;
        border-top: 1px solid rgba(69, 89, 122, 0.1);
    }

    .site-nav.is-open {
        display: block;
    }

    .site-nav .nav-links {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        width: 100%;
    }

    .site-nav .nav-links a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 0.65rem 0.2rem;
    }

    .section,
    .article-wrap,
    .admin-wrap,
    .login-wrap {
        padding: 22px 0 32px;
    }

    .news-card,
    .article-shell,
    .admin-card,
    .login-card,
    .tag-hero {
        border-radius: 22px;
    }

    .article-shell,
    .admin-card,
    .login-card,
    .tag-hero {
        padding: 20px;
    }

    .article-shell h1,
    .admin-card h1,
    .login-card h1 {
        margin: 10px 0 14px;
        font-size: clamp(2rem, 10vw, 3.2rem);
        line-height: 0.98;
    }

    .section-title {
        font-size: clamp(1.9rem, 9vw, 2.6rem);
    }

    .news-card p,
    .tag-description,
    .article-body {
        font-size: 1rem;
        line-height: 1.62;
    }

    .admin-actions {
        width: 100%;
        flex-direction: column;
    }

    .admin-actions > * {
        width: 100%;
    }

    .text-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .news-copy {
        padding: 18px;
    }

    .article-cover {
        margin: 18px 0;
        border-radius: 18px;
    }

    .field {
        margin-bottom: 14px;
    }

    .field input,
    .field select,
    .field textarea {
        padding: 13px 14px;
        border-radius: 16px;
        font-size: 16px;
    }

    .field textarea {
        min-height: 180px;
    }

    .tag-list {
        gap: 7px;
    }

    .tag-chip,
    .badge {
        padding: 0.45rem 0.75rem;
        font-size: 0.76rem;
    }

    .table-wrap {
        margin-inline: -4px;
        padding-bottom: 6px;
    }

    .preview-panel {
        margin-top: 26px;
        padding-top: 22px;
    }

    .preview-body {
        padding: 18px;
    }

    .footer-bottom {
        padding: 0 0 1.6rem;
    }

.footer-bottom p {
        text-align: left;
    }
}/* Corporate visual alignment: visualtechnologies.eu */
:root{
    --bg: #ffffff;
    --bg-deep: #21515f;
    --surface: #ffffff;
    --surface-alt: #f7faf5;
    --line: #d7e3c0;
    --text: #35505a;
    --text-strong: #203841;
    --muted: #6f8087;
    --accent: #3fabcb;
    --accent-2: #90b03f;
    --accent-3: #90b03f;
    --accent-soft: rgba(144, 176, 63, 0.12);
    --shadow: 0 16px 38px rgba(28, 57, 66, 0.08);
    --shadow-soft: 0 10px 24px rgba(28, 57, 66, 0.06);
    --radius: 18px;
    --radius-sm: 14px;
    --gradient-accent: linear-gradient(135deg, #90b03f 0%, #6aa74b 100%);
    --gradient-panel: linear-gradient(180deg, #ffffff 0%, #fbfdf8 100%);
    --gradient-dark: linear-gradient(135deg, #2d6f82 0%, #21515f 100%);
}body{
    color: var(--text);
    background: #ffffff;
}.site-header{
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid #e4ead7;
    box-shadow: none;
}.site-header-inner{
    padding: 16px 0;
}.brand-mark{
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: linear-gradient(135deg, #90b03f 0%, #3fabcb 100%);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9);
}.brand-mark::after{
    inset: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
}.nav-links a{
    color: var(--text-strong);
    font-weight: 700;
}.nav-links a.active,
.nav-links a:hover,
.text-link,
.text-link:hover,
.text-link:focus-visible{
    color: var(--accent-2);
}.nav-toggle{
    border: 1px solid #dbe4ca;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: none;
}.section,
.article-wrap,
.admin-wrap,
.login-wrap{
    padding: 34px 0 52px;
}.news-card,
.article-shell,
.admin-card,
.login-card,
.tag-hero{
    border: 2px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
}.news-card,
.article-shell,
.admin-card,
.login-card,
.tag-hero{
    background: #ffffff;
}.eyebrow{
    color: var(--accent-2);
    letter-spacing: 0.14em;
}.article-shell h1,
.admin-card h1,
.login-card h1,
.section-title{
    color: var(--text-strong);
    line-height: 1.02;
}.news-card p,
.article-body,
.tag-description{
    font-family: "Open Sauce", "Segoe UI", sans-serif;
    color: var(--text);
}.button,
button{
    background: var(--accent-2);
    color: #ffffff;
    box-shadow: none;
}.button-secondary{
    background: #ffffff;
    color: var(--accent-2);
    border: 2px solid var(--accent-2);
}.button:hover,
.button:focus-visible,
button:hover,
button:focus-visible{
    background: #7f9e33;
    color: #ffffff;
    box-shadow: none;
}.button-secondary:hover,
.button-secondary:focus-visible{
    background: rgba(144, 176, 63, 0.08);
    color: #6f8d2d;
}.badge{
    background: rgba(144, 176, 63, 0.14);
    color: #628023;
    border: 1px solid rgba(144, 176, 63, 0.22);
}.news-card{
    background: #ffffff;
}.news-image{
    aspect-ratio: 16 / 10;
    object-fit: cover;
}.news-copy h3,
.article-shell h1,
.tag-hero h1{
    color: var(--text-strong);
}.tag-chip{
    background: rgba(144, 176, 63, 0.12);
    border: 1px solid rgba(144, 176, 63, 0.2);
    color: #628023;
}a.tag-chip:hover,
a.tag-chip:focus-visible{
    background: rgba(144, 176, 63, 0.2);
    color: #54701b;
}.tag-hero{
    background: linear-gradient(180deg, #ffffff 0%, #fbfdf8 100%);
}.field input,
.field textarea,
.field select{
    border: 1px solid #cfdcb4;
    background: #ffffff;
}.site-footer{
    margin-top: 56px;
    padding: 26px 0 18px;
    background: var(--accent-2);
    color: #1f3229;
    border-top: 0;
}.footer-shell{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 0 18px;
    border-bottom: 1px solid rgba(31, 50, 41, 0.18);
}.footer-brand{
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    color: #22352b;
}.footer-nav,
.footer-socials,
.footer-legal{
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}.footer-nav a,
.footer-legal a{
    color: #22352b;
    text-decoration: none;
    font-weight: 600;
}.footer-nav a:hover,
.footer-nav a:focus-visible,
.footer-legal a:hover,
.footer-legal a:focus-visible{
    color: rgba(34, 53, 43, 0.76);
}.footer-socials a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(34, 53, 43, 0.24);
    color: #22352b;
    text-decoration: none;
}.footer-socials svg{
    width: 19px;
    height: 19px;
}.footer-bottom{
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 16px 0 0;
    color: rgba(34, 53, 43, 0.9);
}.footer-bottom p{
    margin: 0;
}

@media (max-width: 920px) {
    .hero-shell {
        grid-template-columns: 1fr;
    }

    .footer-shell,
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 640px) {
    .site-header-inner {
        gap: 12px;
    }

    .hero-copy,
    .article-shell,
    .admin-card,
    .login-card,
    .cta-box,
    .tag-hero {
        padding: 22px;
    }

    .hero-copy h1 {
        font-size: clamp(2.1rem, 9vw, 3.1rem);
    }

    .footer-nav,
    .footer-socials,
    .footer-legal {
        gap: 10px;
    }
}/* Simplified blog layout inspired by bigtrophy.org/blog */
body{
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    background: #ffffff;
    color: #2f3f46;
}main{
    flex: 1 0 auto;
}.container{
    width: min(67.5rem, calc(100vw - 2rem));
}.site-header{
    position: static;
    background: #ffffff;
    border-bottom: 1px solid #e6ece2;
}.site-header-inner{
    padding: 0.875rem 0;
}.brand-mark-image{
    width: clamp(2.5rem, 4vw, 3.25rem);
    height: auto;
    object-fit: contain;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}.brand-mark-image::after{
    content: none;
}.section,
.article-wrap,
.admin-wrap,
.login-wrap{
    padding: clamp(1.5rem, 3vw, 2rem) 0 clamp(2rem, 4vw, 2.5rem);
}.blog-hero-acerca{
    min-height: 50svh;
    display: flex;
    align-items: center;
    background:
        linear-gradient(180deg, rgba(24, 51, 60, 0.34), rgba(24, 51, 60, 0.5)),
        url("../../../Img/AcercaDe/Portada-960.webp") center center / cover no-repeat;
}.blog-hero-acerca-inner{
    min-height: 50svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #ffffff;
    padding-block: clamp(2.5rem, 6vw, 4rem);
}.blog-hero-acerca-inner h1{
    margin: 0;
    max-width: 14ch;
    font-size: clamp(2.25rem, 5vw, 4rem);
    line-height: 1.02;
    font-weight: 800;
}.blog-hero-acerca-inner p{
    max-width: 61.25rem;
    margin: 0.75rem auto 0;
    padding: 0.6rem 0.9rem;
    font-size: clamp(0.95rem, 2.1vw, 1.05rem);
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: 0;
    text-wrap: balance;
    color: rgba(255, 255, 255, 0.98);
    background: rgba(0, 0, 0, 0.35);
    border-radius: 0.65rem;
}.blog-admin-access__link{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.15rem;
    padding: 0.72rem 1.35rem;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.28);
    color: #ffffff;
    font-size: 0.94rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(8px);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}.blog-admin-access__link:hover,
.blog-admin-access__link:focus-visible{
    background: rgba(144, 176, 63, 0.92);
    border-color: rgba(144, 176, 63, 0.92);
    color: #ffffff;
    transform: translateY(-1px);
}.article-shell,
.admin-card,
.login-card,
.tag-hero,
.news-card{
    border: 1px solid #e6ece2;
    border-radius: 0.625rem;
    box-shadow: none;
    background: #ffffff;
}.article-shell h1,
.section-title,
.tag-hero h1{
    margin: 0.5rem 0 0.75rem;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.08;
}.news-card p,
.article-body,
.tag-description{
    font-family: "Open Sauce", "Segoe UI", sans-serif;
    font-size: 1rem;
    line-height: 1.65;
}.section-head:has(.section-title){
    justify-content: center;
    text-align: center;
}.section-title{
    font-size: clamp(1.8rem, 3vw, 2.4rem);
}.news-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2.5vw, 1.5rem);
}.news-card{
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-color: #edf1eb;
}.news-image{
    aspect-ratio: 16 / 10;
    background: #eef2ed;
}.news-copy{
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.625rem;
    padding: 1.25rem 1.25rem 1.5rem;
}.news-copy h3{
    margin: 0;
    max-width: 18ch;
    font-size: 1.18rem;
    line-height: 1.3;
    text-wrap: balance;
}.news-copy p{
    margin: 0;
    max-width: 32ch;
}.badge,
.tag-chip{
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}.badge{
    align-self: center;
    padding: 0.42rem 0.8rem;
    background: transparent;
    border: 1px solid rgba(144, 176, 63, 0.28);
}.tag-list{
    margin-top: 0.625rem;
    justify-content: center;
}.meta{
    color: #74858b;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}.news-copy .text-link{
    margin-top: auto;
    color: var(--text-strong);
    font-size: 0.88rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}.news-copy .text-link:hover,
.news-copy .text-link:focus-visible{
    color: var(--accent-2);
}.button,
button{
    min-height: 2.75rem;
    padding: 0 1.125rem;
    border-radius: 0.375rem;
    box-shadow: none;
}.button-secondary{
    min-height: 2.75rem;
    border-radius: 0.375rem;
}.article-shell,
.admin-card,
.login-card,
.tag-hero{
    padding: clamp(1.125rem, 3vw, 1.5rem);
}.admin-dashboard{
    display: grid;
    gap: 1.25rem;
}.admin-dashboard-head{
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 1rem;
}.admin-dashboard-head h1{
    margin-bottom: 0.5rem;
}.admin-stats{
    display: flex;
    gap: 0.75rem;
}.admin-stat-card{
    min-width: 10rem;
    padding: 0.95rem 1rem;
    border: 1px solid #e6ece2;
    border-radius: 0.625rem;
    background: #fcfdfb;
}.admin-stat-card strong{
    display: block;
    color: var(--text-strong);
    font-size: 1.35rem;
    line-height: 1;
}.admin-stat-card span{
    display: block;
    margin-top: 0.3rem;
    color: #74858b;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}.post-manager-list{
    display: grid;
    gap: 1rem;
}.post-manager-card{
    display: grid;
    grid-template-columns: minmax(9rem, 11rem) minmax(0, 1fr) auto;
    gap: 0.8rem;
    align-items: start;
    padding: 0.8rem;
    border: 1px solid #e6ece2;
    border-radius: 0.625rem;
    background: #ffffff;
}.post-manager-media{
    overflow: hidden;
    border-radius: 0.5rem;
    background: #f3f6f1;
    aspect-ratio: 4 / 3;
}.post-manager-media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}.post-manager-placeholder{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #74858b;
    font-size: 0.88rem;
    font-weight: 600;
}.post-manager-body{
    display: grid;
    gap: 0.45rem;
    min-width: 0;
}.post-manager-top{
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}.post-manager-body h2{
    margin: 0;
    color: var(--text-strong);
    font-size: 1.05rem;
    line-height: 1.2;
}.post-manager-excerpt,
.post-manager-tags{
    margin: 0;
    color: #51646b;
    font-size: 0.88rem;
    line-height: 1.45;
}.post-manager-tags{
    font-size: 0.8rem;
}.post-manager-meta{
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    color: #74858b;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}.post-status-badge{
    display: inline-flex;
    align-items: center;
    padding: 0.38rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}.post-status-badge.is-published{
    background: rgba(144, 176, 63, 0.14);
    color: #628023;
    border: 1px solid rgba(144, 176, 63, 0.22);
}.post-status-badge.is-draft{
    background: rgba(52, 70, 90, 0.08);
    color: #51646b;
    border: 1px solid rgba(52, 70, 90, 0.14);
}.post-manager-actions{
    display: grid;
    gap: 0.45rem;
    min-width: 9.5rem;
}.post-manager-actions form{
    margin: 0;
}.post-manager-actions .button,
.post-manager-actions .button-secondary,
.post-manager-actions button{
    width: 100%;
    min-height: 2.35rem;
    padding: 0 0.85rem;
    font-size: 0.84rem;
}.button-danger{
    border-color: #e4c4c1;
    color: #8a241c;
}.button-danger:hover,
.button-danger:focus-visible{
    background: #fdeceb;
    color: #8a241c;
}.admin-delete-modal[hidden]{
    display: none;
}.has-admin-modal{
    overflow: hidden;
}.admin-delete-modal{
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 1rem;
}.admin-delete-modal__backdrop{
    position: absolute;
    inset: 0;
    background: rgba(21, 34, 40, 0.54);
    backdrop-filter: blur(2px);
}.admin-delete-modal__dialog{
    position: relative;
    z-index: 1;
    width: min(100%, 28rem);
    padding: 1.35rem;
    border: 1px solid rgba(138, 36, 28, 0.12);
    border-radius: 0.75rem;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(21, 34, 40, 0.22);
}.admin-delete-modal__dialog h2{
    margin: 0.4rem 0 0.55rem;
    color: var(--text-strong);
    font-size: 1.45rem;
    line-height: 1.1;
}.admin-delete-modal__dialog p{
    margin: 0;
    color: #51646b;
    line-height: 1.5;
}.admin-delete-modal__post{
    margin-top: 0.9rem !important;
    padding: 0.75rem 0.85rem;
    border: 1px solid #e8dedc;
    border-radius: 0.55rem;
    background: #fff8f7;
    color: #8a241c !important;
    font-weight: 700;
}.admin-delete-modal__actions{
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
    margin-top: 1.1rem;
}.admin-delete-modal__actions .button-secondary{
    min-height: 2.5rem;
    padding: 0 1rem;
}.article-cover{
    margin: 1.25rem 0;
    border-radius: 0.5rem;
}.article-cover-caption{
    margin: -0.75rem 0 1.25rem;
    color: #6f8087;
    font-size: 0.86rem;
    line-height: 1.45;
    text-align: center;
}.article-meta-row{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.9rem;
}.article-meta-row .meta{
    margin: 0;
}.article-meta-row .badge{
    align-self: center;
}.article-tags{
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e7ece3;
}.article-tags-label{
    display: inline-block;
    margin-bottom: 0.65rem;
    color: #74858b;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}.article-tags .tag-list{
    margin-top: 0;
    justify-content: flex-start;
}.post-navigation{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e7ece3;
}.post-navigation-link{
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid #e7ece3;
    border-radius: 0.4rem;
    background: #fcfdfb;
    color: var(--text-strong);
    text-decoration: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}.post-navigation-link:hover,
.post-navigation-link:focus-visible{
    border-color: rgba(144, 176, 63, 0.45);
    background: #f6faef;
}.post-navigation-link.is-next{
    text-align: right;
}.post-navigation-spacer{
    display: block;
}.post-navigation-label{
    color: #74858b;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}.post-navigation-title{
    font-size: 0.88rem;
    line-height: 1.3;
    text-wrap: balance;
}.site-footer{
    margin-top: 2.125rem;
    padding: 1.375rem 0 1rem;
}.footer-shell{
    padding-bottom: 0.875rem;
}.footer-brand-logo{
    width: clamp(10rem, 22vw, 14rem);
    height: auto;
    display: block;
}.footer-socials a{
    width: 2.25rem;
    height: 2.25rem;
}.footer-bottom{
    font-size: 0.92rem;
}.footer-bottom,
.footer-bottom p,
.footer-legal,
.footer-legal a,
.footer-nav a,
.footer-socials a{
    color: #173021;
}.footer-nav a:hover,
.footer-nav a:focus-visible,
.footer-legal a:hover,
.footer-legal a:focus-visible,
.footer-socials a:hover,
.footer-socials a:focus-visible{
    color: #0d2015;
}

@media (max-width: 920px) {
    .news-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .admin-dashboard-head,
    .post-manager-card {
        grid-template-columns: 1fr;
    }

    .admin-stats {
        width: 100%;
    }

    .admin-stat-card,
    .post-manager-actions {
        min-width: 0;
    }

    .post-manager-media {
        max-width: 16rem;
    }

    .site-header-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 0.6rem;
    }

    .brand-link {
        flex: 0 0 auto;
        width: auto;
        align-items: center;
    }

    .site-nav {
        margin-left: auto;
        width: auto;
    }

    .site-header .nav-links {
        flex-wrap: nowrap;
        width: auto;
        gap: 0.5rem;
    }

    .nav-links a {
        font-size: 0.96rem;
        white-space: nowrap;
    }
}

@media (max-width: 768px) {
    .nav-toggle {
        display: inline-flex;
    }

    .site-header-inner {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .brand-link {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
    }

    .site-nav {
        display: none;
        width: 100%;
        margin-left: 0;
        margin-top: 0.25rem;
        padding-top: 0.625rem;
        border-top: 1px solid rgba(24, 39, 20, 0.1);
    }

    .site-nav.is-open {
        display: block;
    }

    .site-nav .nav-links {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.5rem;
        width: 100%;
        flex-wrap: wrap;
    }

    .site-nav .nav-links a {
        display: flex;
        align-items: center;
        min-height: 2.75rem;
        padding: 0.5rem 0.2rem;
        white-space: normal;
    }
}

@media (max-width: 640px) {
    .container {
        width: min(100vw - 1.5rem, 100%);
    }

    .blog-hero-acerca,
    .blog-hero-acerca-inner {
        min-height: 50svh;
    }

    .brand-mark-image {
        width: 2.5rem;
    }

    .blog-hero-acerca-inner p {
        margin-top: 0.875rem;
        font-size: 1rem;
    }

    .news-grid {
        grid-template-columns: 1fr;
    }

    .hero-copy h1,
    .article-shell h1,
    .section-title,
    .tag-hero h1 {
        font-size: clamp(1.9rem, 8vw, 2.6rem);
    }

    .hero-actions {
        width: auto;
        flex-direction: row;
    }

    .hero-actions > * {
        width: auto;
    }

    .article-shell,
    .admin-card,
    .login-card,
    .cta-box,
    .tag-hero {
        padding: 1.125rem;
    }

    .post-manager-card {
        padding: 0.9rem;
    }

    .post-manager-media {
        max-width: none;
    }

    .post-manager-actions {
        width: 100%;
    }

    .post-navigation {
        grid-template-columns: 1fr;
    }

    .post-navigation-link.is-next {
        text-align: left;
    }

    .post-navigation-spacer {
        display: none;
    }

    .footer-brand-logo {
        width: min(11rem, 60vw);
    }

}