/* ===== STAGE LAYOUT ===== */
.stage {
    position: relative;
    width: 100%;
    height: 100%;
}

/* ===== BLOCK PRIMITIVES ===== */
.block {
    position: relative;
}

/* Label placement */
.nexo .text {
    left: calc(var(--cx) - 225px);
    top: calc(var(--cy) - 30px);
    text-align: right;
}

.portfolio .text {
    left: calc(var(--cx) - 70px);
    top: calc(var(--cy) - 30px);
    text-align: left;
}

/* Connector */
.connector {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    background: transparent;
    left: calc(var(--cx-left));
    top: calc(var(--cy-right) - 50px);
    width: calc(var(--cx-right) - var(--cx-left));
    height: calc(var(--cy-left) / 2);
    border: 3px dashed var(--color-connector);
    border-top: none;
    border-radius: 20px;
}

.headline {
    position: fixed;
    z-index: 5;
    margin: 0;
    padding: 6px 18px;
    white-space: nowrap;
    left: calc((var(--cx-left) + var(--cx-right)) / 2);
    top: calc(var(--cy-right) + 22vh);
    transform: translateX(-50%);
    font-size: 24px;
    font-weight: 600;
    color: var(--color-muted);
    letter-spacing: 0.02em;
}

/* ===== MAIN CONTAINER ===== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--sp-4);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ===== HEADER ===== */
.header {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.logo {
    width: 90px;
    height: 90px;
    display: grid;
    place-items: center;
    background: var(--color-bg);
}

.logo img {
    max-width: 90%;
    max-height: 90%;
}

.title h1 {
    font-size: clamp(22px, 3.2vmin, 36px);
    font-weight: 700;
    margin: 0;
}

.title p {
    font-size: clamp(14px, 2vmin, 16px);
    color: var(--color-muted);
    margin: var(--sp-1) 0 0;
}

/* ===== CONTENT AREA ===== */
.content-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.content-spacer {
    flex: 1;
    min-height: 20vh;
}

/* ===== NAVIGATION PILL ===== */
.nav-pill-container {
    display: flex;
    justify-content: center;
    margin-bottom: var(--sp-4);
}

.nav-pill {
    width: var(--nav-pill-width);
    max-width: 800px;
    border: 5px solid var(--c-accent);
    border-radius: var(--r-outer);
    background: var(--color-bg);
    padding: var(--sp-2) var(--sp-3);
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    position: relative;
}

.nav-item {
    position: relative;
    padding: var(--sp-2) var(--sp-3);
}

/* ===== PROJECTS GRID ===== */
.projects-container {
    display: flex;
    justify-content: flex-start;
    margin-top: auto;
    margin-bottom: var(--sp-3);
    padding-top: var(--sp-4);
    width: 100%;
    max-width: calc(var(--icon-size) * 6 + var(--sp-3) * 5);
    margin-left: auto;
    margin-right: auto;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--icon-size), 1fr));
    gap: var(--sp-3);
    width: 100%;
    justify-items: start;
    align-items: start;
}

.projects-grid {
    row-gap: var(--sp-3);
}

/* ===== BASELINE ===== */
.baseline-container {
    display: flex;
    justify-content: center;
    margin-bottom: var(--sp-2);
}

.baseline {
    width: 80%;
    max-width: 600px;
    height: 0;
    border-bottom: 3px dashed transparent;
    background: repeating-linear-gradient(
        90deg, 
        var(--c-accent) 0 var(--dash), 
        transparent var(--dash) calc(var(--dash) + var(--gap))
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    padding-bottom: 3px;
}

.copyright {
    text-align: center;
    color: var(--color-dimmed);
    font-size: 12px;
    margin-bottom: var(--sp-3);
}

@media (max-width: 640px) {
    .stage { min-height: 100svh; }
    .nexo .text,
    .portfolio .text {
        left: 50%;
        width: min(88vw, 320px);
        text-align: center;
        transform: translateX(-50%);
    }
    .nexo .text { top: calc(var(--cy-left) - 180px); }
    .portfolio .text { top: calc(var(--cy-right) + 120px); }
    .connector { display: none; }
    .headline { top: calc(var(--cy-right) + 205px); font-size: 18px; }
}