.notch-cover {
    position:   fixed;
    top:        0;
    left:       0;
    right:      0;
    height:     0;
    background: var(--bg);
    z-index:    999;
    pointer-events: none;
}

@media (max-width: 600px) {
    .notch-cover {
        height: 7px;   
    }
}

/* ============================================================
   MADE PAGE
   ============================================================ */

.made-tagline {
    font-size:      var(--size-lg);
    font-weight:    var(--weight-light);
    color:          var(--text);
    margin-top:     var(--space-lg);
    margin-bottom:  var(--space-lg);
}

/* ============================================================
   EXPERIENCE TIMELINE
   Nested sticky headers — same trick as the old portfolio's
   .storyHeading / .sectionBeginning, generalized to 3 levels:

     level 1 — job-header   (dates + logo)
     level 2 — role-title   (role name)
     level 3 — category-title (Achievement / Challenge / etc.)

   Each level sticks to the top, stacked under the level above it,
   and un-sticks naturally once its container scrolls past.
   No JS required.
   ============================================================ */

:root {
    --stick-1-h:    3.5rem;   /* job-header height */
    --stick-2-h:    3rem;     /* role-title height */
    --stick-3-h:    2.5rem;   /* category-title height */
}

.timeline {
    display:        flex;
    flex-direction: column;
    margin-top:     var(--space-lg);
}

.job {
    border-left:    0.15rem solid var(--border);
    padding-left:   var(--space-xxs);
}

.edu {
    width:          100%;
    box-sizing:     border-box;
    min-height:     4.5rem;
    margin:         var(--space-sm) 0;   /* vertical spacing only — no horizontal margin */
    padding:        var(--space-sm) var(--space-md);
    border-radius:  1.5rem;
    background:     color-mix(in srgb, var(--text) 6%, transparent);

    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    gap:            0.15rem;
    text-align:     center;
}

.edu-year,
.edu-label,
.edu-place {
    max-width:      100%;
    overflow-wrap:  break-word;
}

.edu-year {
    font-size:      var(--size-sm);
    font-weight:    var(--weight-light);
    color:          var(--text-muted);
}

.edu-label {
    font-weight:    var(--weight-medium);
}

.edu-place {
    font-weight:    var(--weight-light);
    color:          var(--text-muted);
}

/* ---------- level 1: dates + logo ---------- */

.job-header {
    position:       sticky;
    top:            0;
    z-index:        3;

    display:        flex;
    align-items:    center;
    justify-content: space-between;
    gap:            var(--space-sm);

    height:         var(--stick-1-h);
    background:     var(--bg);
}

.job-dates {
    font-size:      var(--size-sm);
    font-weight:    var(--weight-medium);
    color:          var(--text);
    white-space:    nowrap;
    padding-left:   var(--space-xs);
}

.job-logo {
    height:         1.5rem;
    width:          auto;
    display:        block;
}

/* ---------- level 2: role name ---------- */

.role {
    padding-left:   var(--space-xs);
}

.role-title {
    position:       sticky;
    top:            var(--stick-1-h);
    z-index:        2;

    display:        flex;
    align-items:    center;

    min-height:     var(--stick-2-h);
    background:     var(--bg);

    font-size:      var(--size-lg);
    font-weight:    var(--weight-semibold);
    color:          var(--text);
}

/* ---------- level 3: category (Achievement / Challenge / etc) ---------- */

.category {
    border-left:    0.15rem solid var(--border);
    padding-left:   var(--space-sm);
    margin-left:    var(--space-xxs);
}

.category-title {
    position:       sticky;
    top:            calc(var(--stick-1-h) + var(--stick-2-h));
    z-index:        1;

    display:        flex;
    align-items:    center;

    min-height:     var(--stick-3-h);
    background:     var(--bg);

    font-size:      var(--size-base);
    font-weight:    var(--weight-medium);
    color:          var(--text-muted);
}

.category.b-a {
    border-left-color: rgba(0, 176, 80, 0.5);
}
.category-title.b-a {
    color: #00B050;
}

.category.b-c {
    border-left-color: rgba(255, 147, 0, 0.5);
}
.category-title.b-c {
    color: #FF9300;
}

.category.b-l {
    border-left-color: rgba(70, 177, 225, 0.5);
}
.category-title.b-l {
    color: #46B1E1;
}

.category.w-d {
    border-left-color: rgba(255, 64, 255, 0.5);
}
.category-title.w-d {
    color: #FF40FF;
}

.category-body {
    padding:        var(--space-sm) 0 var(--space-lg) 0;
    background:     var(--bg);
    margin-bottom:  var(--space-md);
}

.category-body p {
    font-size:      var(--size-base);
    font-weight:    var(--weight-light);
    color:          var(--text);
    max-width:      60ch;
    margin-bottom:  var(--space-xs);
}

.category-body ul {
    list-style:     none;
    display:        flex;
    flex-direction: column;
    gap:            var(--space-xs);
}

.category-body li {
    font-size:      var(--size-base);
    font-weight:    var(--weight-light);
    color:          var(--text);
    max-width:      60ch;
    padding-left:   1rem;
    position:       relative;
}

.category-body li::before {
    content:        '–';
    position:       absolute;
    left:           0;
    color:          var(--text-muted);
}

/* last category in a role gets extra breathing room before the next role/job */
.category:last-child .category-body {
    padding-bottom: var(--space-xl);
}