/* ==========================================================================
   INDEX — Desktop (1280px – 1920px)
   Design reference: 1920x2292 total, no hero — just the section itself
   plus the shared footer. Menu + profile widget only (no settings,
   message or shop buttons on this screen).
   ========================================================================== */

.index-main {
    position: relative;
    width: 100%;
    height: 195.2rem;
    background-color: #ffffff;
    overflow: hidden;
}

/* Bottom art, pinned flush to the bottom edge (not top) so it always
   overlaps straight into the footer with no seam, regardless of any
   future height changes to this section — same pattern as
   .portfolio-main__bg. */
.index-main__bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 92.2rem;
    object-fit: cover;
    z-index: 0;
}

/* Seam patch — solid black strip right at the bottom edge, covering
   any hairline gap between index-main and the footer after it. */
.index-main__seam-patch {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.5rem;
    background-color: #000000;
    z-index: 10;
}

/* Top-left nav row — flex + gap holds a 40px gap automatically in
   every language, no manual html[data-lang] overrides needed. */
.index-main__nav {
    position: absolute;
    left: 5rem;
    top: 5rem;
    display: flex;
    align-items: baseline;
    gap: 4rem;
    z-index: 1;
}

.index-main__nav-link {
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 4rem;
    line-height: 4rem;
    letter-spacing: -0.08em;
    color: #000000;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.index-main__nav-link:hover {
    opacity: 0.5;
}

.index-main__nav-link--homepage {
    text-transform: uppercase;
}

/* --- Interactive project list (Index) — ported from the old site,
   same positions, converted from px to rem (÷10) to match this
   site's fluid-scale system. Rows are generated by js/index.js,
   which also uses rem for the same reason. --- */
.index-list {
    position: absolute;
    top: 0;
    left: 0;
    width: 192rem;
    z-index: 3;
    user-select: none;
    -webkit-user-select: none;
}

.index-title {
    position: absolute;
    top: 36rem;
    left: 5rem;
    width: 24.6rem;
    height: 8.2rem;
}

.idx-header {
    position: absolute;
    top: 37.5rem;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: default;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 600;
    text-transform: none;
    color: #000000;
    opacity: 1;
    font-size: 2rem;
    line-height: 2rem;
    letter-spacing: -0.08em;
}

.idx-header-clients,
.idx-header-status,
.idx-header-year {
    cursor: pointer;
}

.idx-header-clients:hover .idx-header-label,
.idx-header-status:hover .idx-header-label,
.idx-header-year:hover .idx-header-label {
    text-decoration: underline;
}

.idx-header-clients { left: 34rem; }
.idx-header-type    { left: 73.5rem; }
.idx-header-status  { left: 111rem; }
.idx-header-year    { left: 142.5rem; }

.idx-header-arrow {
    position: absolute;
    top: 37.8rem;
    width: 1.5rem;
    height: 1.7rem;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.idx-arrow-clients { left: 47.2rem; }
.idx-arrow-status  { left: 116.6rem; }
.idx-arrow-year    { left: 146.6rem; }

.idx-header-arrow.is-flipped {
    transform: scaleY(-1);
}

.idx-row {
    position: absolute;
    left: 0;
    width: 100%;
    height: 3.5rem;
}

.idx-cell {
    position: absolute;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 600;
    text-transform: none;
    letter-spacing: -0.08em;
    white-space: nowrap;
    cursor: default;
}

.idx-cell-brand {
    left: 34rem;
    top: 0.2rem;
    font-size: 3rem;
    line-height: 3rem;
    color: #000000;
    opacity: 1;
}

.idx-cell-type {
    left: 73.5rem;
    top: 1rem;
    font-size: 2rem;
    line-height: 2rem;
    color: #000000;
    opacity: 0.6;
}

.idx-cell-status {
    left: 111rem;
    top: 1rem;
    font-size: 2rem;
    line-height: 2rem;
    color: #000000;
    opacity: 0.6;
}

.idx-cell-year {
    left: 142.5rem;
    top: 1rem;
    font-size: 2rem;
    line-height: 2rem;
    color: #000000;
    opacity: 0.6;
}

.idx-row:hover .idx-cell-brand,
.idx-row:hover .idx-cell-type,
.idx-row:hover .idx-cell-status,
.idx-row:hover .idx-cell-year {
    text-decoration: underline;
}