/* ============================================
   VARIABLES & TOKENS
   ============================================ */
:root {
    --text-rgb-0-0-255: rgba(0, 0, 255, 1);
    --text-black: rgba(0, 0, 0, 1);
    --font-family-times-new-roman: 'Times New Roman', Times, serif;
}

.text-rgb-0-0-255 {
    color: var(--text-rgb-0-0-255);
}

.text-black {
    color: var(--text-black);
}

/* END VARIABLES & TOKENS */

/* ============================================
   CSS RESET
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
}

button,
a {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
}

img {
    max-width: 100%;
    height: auto;
}

/* END CSS RESET */

/* ============================================
   MAIN LAYOUT - RESPONSIVE
   ============================================ */
.frame-1-1 {
    position: relative;
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
    background-color: rgba(255, 255, 255, 1);
    padding-left: 34px;
    padding-top: 27.83px;
    padding-right: 34px;
}

/* WRITING Header - EXACT ORIGINAL POSITIONING */
.text-15 {
    position: absolute;
    left: 34px;
    top: 27.83px;
    text-align: left;
    font-family: var(--font-family-times-new-roman);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    text-transform: none;
    color: var(--text-black);
}

/* Email / Linkedin Footer - EXACT ORIGINAL POSITIONING */
.text-17 {
    position: absolute;
    left: auto;
    right: 34px;
    top: 30.58px;
    text-align: left;
    font-family: var(--font-family-times-new-roman);
    font-weight: normal;
    font-size: 15px;
    text-decoration: none;
    text-transform: none;
}

/* END MAIN LAYOUT */

/* ============================================
   ARTICLE LIST STYLES - TIGHTER SPACING
   ============================================ */
/* Article List Container */
.group-5-2 {
    position: absolute;
    left: 34px;
    top: 53px;
    width: auto;
    max-width: calc(100% - 68px);
}

/* REUSABLE ARTICLE ITEM TEMPLATE */
/* Use these classes for any new articles you add */

/* Article item wrapper - CLOSER SPACING */
.group-1-3,
.group-2-6,
.group-3-9,
.group-4-12,
.group-5-15,
.article-item {
    position: relative;
    width: auto;
    height: 17.24px;
    margin-bottom: 16px;
}

/* ============================================
   ARTICLE LINK STYLES - START
   CRITICAL: Maintains single-line titles
   ============================================ */
.text-4,
.text-7,
.text-10,
.text-13,
.text-16,
.article-link {
    position: absolute;
    left: 15px;
    top: 3.58px;
    text-align: left;
    font-family: var(--font-family-times-new-roman);
    font-weight: normal;
    font-size: 15px;
    text-decoration: underline;
    text-transform: none;
    color: var(--text-rgb-0-0-255);
    white-space: nowrap;
    /* Prevents text wrapping to multiple lines */
}

/* Hover effect for article links */
.text-4:hover,
.text-7:hover,
.text-10:hover,
.text-13:hover,
.text-16:hover,
.article-link:hover {
    text-decoration: none;
}

/* ARTICLE LINK STYLES - END */

/* ============================================
   ARTICLE BULLET POINTS - EXACT ORIGINAL POSITIONING
   ============================================ */
.ellipse-3-5,
.ellipse-4-8,
.ellipse-5-11,
.ellipse-6-14,
.ellipse-7-17,
.article-bullet {
    position: absolute;
    left: 0px;
    top: 10.5px;
    width: 5px;
    height: 5px;
    background-color: rgba(0, 0, 0, 1);
    border-radius: 50%;
}

/* END ARTICLE LIST STYLES */

/* ============================================
   FOOTER LINKS
   ============================================ */
.btn-email,
.btn-linkedin {
    display: inline;
    font-family: var(--font-family-times-new-roman);
    font-weight: normal;
    font-size: 15px;
    text-decoration: underline;
    text-transform: none;
    color: var(--text-rgb-0-0-255);
}

.btn-email:hover,
.btn-linkedin:hover {
    text-decoration: none;
}

/* END FOOTER LINKS */

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
/* Mobile - Adjust padding but maintain proportions */
@media (max-width: 768px) {
    .frame-1-1 {
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 20px;
    }

    .text-15 {
        left: 20px;
        top: 20px;
    }

    .text-17 {
        right: 20px;
        top: 23px;
    }

    .group-5-2 {
        left: 20px;
        top: 46px;
        max-width: calc(100% - 40px);
    }
}

/* Very small mobile - Further reduce spacing */
@media (max-width: 480px) {
    .frame-1-1 {
        padding-left: 16px;
        padding-right: 16px;
    }

    .text-15 {
        left: 16px;
        font-size: 14px;
    }

    .text-17 {
        right: 16px;
        font-size: 13px;
    }

    .group-5-2 {
        left: 16px;
        max-width: calc(100% - 32px);
    }

    .text-4,
    .text-7,
    .text-10,
    .text-13,
    .text-16,
    .article-link {
        font-size: 14px;
    }
}

/* Large screens - maintain original spacing */
@media (min-width: 1441px) {
    .frame-1-1 {
        padding-left: 34px;
        padding-right: 34px;
    }
}

/* END RESPONSIVE ADJUSTMENTS */

/* ============================================
   TEMPLATE FOR ADDING NEW ARTICLES
   ============================================
   
To add a new article, add this HTML inside the .group-5-2 container:

<div class="article-item">
  <div class="article-bullet"></div>
  <a href="YOUR_URL" target="_blank" rel="noopener noreferrer" class="article-link">
    <span class="text-rgb-0-0-255">Your Article Title</span>
  </a>
</div>

Key measurements:
- Articles are 16px apart (margin-bottom: 16px) - closer spacing
- Bullet point at left: 0px, top: 10.5px (centered vertically)
- Text at left: 15px, top: 3.58px (from Figma)
- Font: Times New Roman, 15px
- Color: Blue (rgb(0, 0, 255))
- Underline by default, removed on hover
- white-space: nowrap prevents text wrapping
- Responsive: scales down on mobile while maintaining proportions

============================================ */