/* --- NY Times Inspired Styling --- */
        body {
            /* Using standard serif fonts found on most systems */
            font-family: Georgia, 'Times New Roman', Times, serif; 
            margin: 0;
            padding: 0;
            background-color: #ffffff; /* White background */
            color: #121212; /* Very dark gray for body text */
            line-height: 1.5;
            font-size: 18px; /* Slightly larger body font for better reading */
        }

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

        header {
            text-align: center;
            padding: 30px 0;
            margin-bottom: 20px;
            /* Thin line separator */
            border-bottom: 1px solid #ddd; 
        }

        header h1 {
            font-family: 'Times New Roman', Times, serif; /* Traditional serif for main title */
            font-size: 3em; 
            font-weight: 700;
            letter-spacing: -1px; /* Tighter letter spacing for the masthead feel */
            margin-bottom: 5px;
            color: #121212;
        }

        header p {
            font-family: Arial, sans-serif; /* Subhead often uses sans-serif for contrast */
            color: #555;
            font-size: 1.1em;
            margin-top: 0;
        }

        section {
            padding: 30px 0;
            border-bottom: 1px solid #eee; /* Light separator between sections */
        }

        section:last-child {
            border-bottom: none;
        }

        section h2 {
            font-family: Arial, sans-serif; /* Sans-serif for section headers */
            font-size: 1.4em;
            font-weight: 700;
            text-transform: uppercase;
            color: #000000;
            margin-bottom: 20px;
            padding-bottom: 5px;
            border-bottom: 3px solid #000; /* Bold black line under the section header */
        }

        .item {
            margin-bottom: 25px;
            padding-bottom: 10px;
        }

        .item h3 {
            font-family: Georgia, serif; /* Serif for article/project titles */
            font-size: 1.5em;
            font-weight: 600;
            margin: 0 0 5px 0;
            line-height: 1.2;
        }

        .item a {
            color: #0056b3;
            text-decoration: none;
        }

        .item a:hover {
            color: #000;
            text-decoration: underline;
        }

        .item p {
            font-size: 0.9em;
            color: #333;
        }

        #about > p::first-letter {
            font-family: Georgia, 'Times New Roman', Times, serif;
            font-size: 3.8em;
            font-weight: 700;
            float: left;
            line-height: 0.75;
            margin-right: 6px;
            margin-top: 4px;
            color: #121212;
        }

        /* Contact links are often simple and centered */
        .contact-list {
            list-style: none;
            padding: 0;
            display: flex;
            gap: 40px;
            justify-content: center;
            font-family: Arial, sans-serif;
            font-size: 0.9em;
        }

        #chartdiv{
        width: 360px;
        height: 360px;
        margin: 24px auto 0;
        background: #000;

        border-radius: 50%;
        overflow: hidden;
        }



        .legend{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-top: 8px;

        font-size: 14px;
        color: #000;
        }

        .legend-box{
        width: 14px;
        height: 10px;
        background: #ff0000;
        border: 1px solid #000;
        }

        .viz-button{
        display: inline-block;
        margin: 20px auto 0;
        padding: 12px 22px;

        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0.3px;

        color: #fff;
        background: #000;
        border: 2px solid #000;
        text-decoration: none;

        transition: background 0.2s ease, color 0.2s ease;
        }

        .viz-button:hover{
        background: #ff0000;
        color: #fff;
        }

        /* VISUALIZATIONS PAGE */
        /* Visualizations layout */
        .viz-list{
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 16px 48px;
        }

        .viz-item{
        display: flex;
        gap: 22px;
        align-items: flex-start;
        margin: 26px 0;
        padding: 18px 0;
        border-top: 1px solid #e6e6e6;
        }

        .viz-media{
        flex: 0 0 70%;
        min-width: 0;
        overflow: hidden;
        }


        .viz-meta{
        flex: 1;
        min-width: 0;
        }

        .viz-embed{
        width: 100%;
        height: 75vh;
        min-height: 620px;
        border: 0;
        display: block; 
        outline: 0;
        border-radius: 0;
        background: transparent;
        }


        .viz-img{
        width: 100%;
        height: auto;
        display: block;
        /* border: 1px solid #e6e6e6; */
        border-radius: 10px;
        background: #fff;
        }

        .viz-meta h2{
        margin: 0 0 10px;
        }

        .viz-links{
        margin: 10px 0 0;
        }

        .viz-sep{
        margin: 0 8px;
        opacity: 0.6;
        }

        .viz-tags{
        margin: 12px 0 0;
        }

        .tag{
        display: inline-block;
        padding: 4px 10px;
        margin: 0 8px 8px 0;
        border: 1px solid #e6e6e6;
        border-radius: 999px;
        font-size: 12px;
        }

        /* Responsive: stack on small screens */
        @media (max-width: 900px){
        .viz-item{ flex-direction: column; }
        .viz-media{ flex-basis: auto; }
        .viz-embed{ height: 80vh; min-height: 520px; }
        }

        /* Full-width, stacked visualization item */
        .viz-item--full{
        display: block;
        }

        .viz-item--full .viz-media{
        width: 100%;
        overflow: hidden;
        }

        .viz-item--full .viz-embed{
        width: 100%;
        height: 85vh;     /* ή 80–90vh αν το θες σχετικό με οθόνη */
        /* min-height: 900px; προαιρετικό */
        max-height: none;  /* σημαντικό: να μην κόβει */
        border: 0;
        display: block;
        }



        .viz-title{
        margin: 0 0 12px;
        }

        .viz-desc{
        margin: 12px 0 0;
        max-width: 70ch;     /* optional: keeps text readable */
        }