:root{
        --bg: #121016;
        --text: #ffffff;
        --panel-min: 0.95;
        --panel-max: 6.5;
        --skew: 12deg;
        --transition: 520ms cubic-bezier(.18,.9,.3,1);
    }

    *{box-sizing:border-box}
    html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:Inter, "Segoe UI", system-ui, Roboto, Arial, sans-serif; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}

    .panels { display:flex; height:100vh; width:100%; gap:0; align-items:stretch; overflow:hidden; background:var(--bg); }

    .panel {
        position:relative;
        display:block;
        flex: var(--panel-min);
        min-width:0;
        height:auto;
        object-fit:contain;
        cursor:pointer;
        color:var(--text);
        text-decoration:none;
        outline:none;
        background-color:#222;
        background-size:cover;
        background-position:center;
        overflow:hidden;
        transition: flex var(--transition);
        will-change: flex, transform;
        transform: translateZ(0);
        box-shadow: inset 0 0 0 1px rgba(0,0,0,0.02);
        tabindex:0;
    }

    /* Hover / focus expansion */
    .panel:hover, .panel:focus-within { flex: var(--panel-max); }

    /* Remove darkening overlay entirely */
    /* .panel::after removed */

    .panel .skew { position:absolute; left:-6%; top:0; bottom:0; width:112%; transform:skewX(calc(var(--skew) * -1)); transform-origin:center; z-index:1; pointer-events:none; }

    .panel .content {
        position:relative;
        z-index:2;
        padding:6vw 8vw;
        display:flex;
        flex-direction:column;
        justify-content:center;
        gap:0.6rem;
        pointer-events:auto;
    }

    .title {
        font-size: clamp(32px, 5.6vw, 96px);
        margin:0;
        font-weight:700;
        line-height:0.95;
        white-space:nowrap;
        transform: translateX(-22%);
        transition: transform 420ms cubic-bezier(.2,.9,.2,1), opacity 260ms ease;
        pointer-events:none;
        opacity:0.98;
        -webkit-text-stroke: 2px;
        -webkit-text-stroke-color: #121212;
        text-shadow: 2px 2px 3px black;
    }
    .panel:hover .title, .panel:focus-within .title { transform: translateX(0); }

    .description {
        margin:0;
        font-size: clamp(16px, 2vw, 26px);
        opacity:0;
        transform: translateY(10px);
        transition: opacity 380ms cubic-bezier(.2,.9,.2,1), transform 380ms cubic-bezier(.2,.9,.2,1);
        pointer-events:none;
        will-change: opacity, transform;
        text-shadow: 2px 2px 3px black;
    }
    .panel:hover .description, .panel:focus-within .description { opacity:1; transform: translateY(0); pointer-events:auto; }

    .meta {
        margin-top:0.5rem;
        font-size: clamp(12px, 1.1vw, 16px);
        opacity:0;
        transform: translateY(6px);
        transition: opacity 380ms cubic-bezier(.2,.9,.2,1), transform 380ms cubic-bezier(.2,.9,.2,1);
        text-shadow: 2px 2px 3px black;
    }
    .panel:hover .meta, .panel:focus-within .meta { opacity:1; transform:none; }

    .panel:focus-visible { box-shadow: inset 0 0 0 3px rgba(255,255,255,0.06); }

    @media (max-width:720px) {
        .panels { flex-direction:column; }
        .panel { flex:none; min-height:46vh; }
        .panels:hover .panel { flex:none; }
        .panel .skew { left:0; width:100%; transform:none; }
        .title { transform:none; white-space:normal; }
        .description, .meta { opacity:1; transform:none; pointer-events:auto; }
    }

    @media (prefers-reduced-motion: reduce) {
        .panel, .title, .description, .meta { transition: none !important; }
    }