/* ============================================================
   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);
}

/* ============================================================
   PROJECT ROWS
   ============================================================ */

.projects {
    display: flex;
    flex-direction: column;
}

.project {
    border-top: 1px solid var(--border);
    padding: var(--space-md) 0;
    cursor: pointer;
}

.project:last-child {
    border-bottom: 1px solid var(--border);
}

/* Header row */
.project-header {
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    user-select:    none;
    width:          100%;
}

.project-left {
    display:        flex;
    align-items:    center;
    gap:            var(--space-sm);
}

.project-name {
    font-size:      var(--size-base);
    font-weight:    var(--weight-medium);
    color:          var(--text);
}

.project-tag {
    font-size:      0.7rem;
    font-weight:    var(--weight-medium);
    color:          var(--text-muted);
    border:         1px solid var(--border);
    padding:        2px 8px;
    border-radius:  var(--radius);
}

.project-right {
    display:        flex;
    align-items:    center;
    gap:            var(--space-sm);
}

.project-link {
    font-size:      var(--size-sm);
    color:          var(--text-muted);
    text-decoration: none;
    transition:     color 0.15s ease;
}

.project-link:hover {
    color: var(--text);
}

.project-chevron {
    color:           var(--text-muted);
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center center;
}

.project.open .project-chevron {
    transform: rotate(180deg);
}

/* ============================================================
   BODY — collapsed by default
   ============================================================ */

.project-body {
    max-height:     0;
    overflow:       hidden;
    transition:     max-height 0.35s ease;
}

.project.open .project-body {
    max-height:     300px;
}

/* ============================================================
   STORY TABS
   ============================================================ */

.story {
    display:        flex;
    margin-top:     var(--space-md);
    border:         1px solid var(--border);
    border-radius:  var(--radius);
    overflow:       hidden;
}

.act {
    flex:           1;
    padding:        var(--space-sm) var(--space-sm);
    border-right:   1px solid var(--border);
    cursor:         pointer;
    transition:     background 0.15s ease;
}

.act:last-child {
    border-right: none;
}

.act:hover {
    background: var(--bg-subtle);
}

.act.active {
    background: var(--bg-subtle);
}

.act-label {
    font-size:      var(--size-xs);
    font-weight:    var(--weight-medium);
    color:          var(--text-muted);
    margin-bottom:  4px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.act.active .act-label {
    color: var(--text);
}

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

.act.active .act-word {
    color:          var(--text);
    font-weight:    var(--weight-regular);
}

/* ============================================================
   ACT CONTENT
   ============================================================ */

.act-content {
    display:        none;
    font-size:      var(--size-sm);
    font-weight:    var(--weight-light);
    color:          var(--text-muted);
    line-height:    1.7;
    padding:        var(--space-sm) 0 var(--space-xs) 0;
    max-width:      52ch;
}

.act-content.visible {
    display: block;
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {
    .act-word {
        font-size: var(--size-xs);
    }

}