/* Split layout: fixed dark panel left, scrolling light content right */

.panel {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--panel-width);
    background-color: var(--panel-bg);
    color: var(--panel-text);
    overflow: hidden;
}

.panel-shapes {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Scrim: keeps hero text legible, lets cells show through lower down */
.panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(10, 10, 15, 0.85) 0%,
        rgba(10, 10, 15, 0.55) 45%,
        rgba(10, 10, 15, 0.2) 100%);
    pointer-events: none;
}

.panel-inner {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-l);
}

/* Hero uses most of the (now narrower) panel width, anchored at a stable,
   viewport-relative offset (scales down on short screens) so it never moves
   as rail entries appear or vanish. */
.hero {
    width: 88%;
    flex-shrink: 0;
    margin-top: 8vh;
}

/* The rail fills the remaining panel height rather than a fixed slice, so the
   stack adapts to the panel instead of overflowing it. Its box size depends
   on the layout, not on how many entries it holds, so the hero stays put.
   It only scrolls internally as a last resort on very short viewports.

   It spans the full width with 6% inline padding (rather than width: 88%), so
   the entries line up with the hero while their borders sit *inside* the
   scroll container's clip edge — `overflow-y` forces `overflow-x: auto`, which
   would otherwise clip the right border and let the scrollbar cover it. */
.rail {
    width: 100%;
    padding-inline: 6%;
    flex: 1 1 auto;
    min-height: 0;
    margin-top: var(--space-l);
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.content {
    margin-left: var(--panel-width);
    padding: var(--space-xl) var(--space-l);
}

.section {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: var(--space-xl) 0;
}

.section + .section {
    border-top: 1px solid var(--color-border);
}

.content-footer {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: var(--space-l) 0;
    color: var(--color-muted);
    font-size: 0.875rem;
}

/* Mobile: single column, dark hero block on top, no rail */
@media (max-width: 899px) {
    .panel {
        position: static;
        width: 100%;
        height: auto;
    }

    .panel-shapes {
        display: none;
    }

    /* No canvas on mobile, so no legibility scrim is needed. The panel is
       static here, which would otherwise let the absolute scrim escape and
       darken the light content below. */
    .panel::after {
        display: none;
    }

    .panel-inner {
        padding: var(--space-l);
    }

    .rail {
        display: none;
    }

    .hero {
        width: 100%;
    }

    .content {
        margin-left: 0;
        padding: var(--space-m) var(--space-l);
    }

    .section {
        padding: var(--space-l) 0;
    }
}