/* ------------------------------------------------------------------
   "More" — work shown as one or two images rather than a full page.
   A loose two-column flow: each piece keeps its own proportions and sits
   at its own width, so the page scatters instead of marching in a grid.
   Shared styles (variables, header, footer, section-label) are in base.css.
   ------------------------------------------------------------------ */

.more{
    padding: 40px var(--margin) 100px;
}

/* A two-column grid that fills ROW BY ROW, so pieces read left to right
   as you scroll. Each sits at the top of its row at its own width, which
   is what keeps the page scattered rather than tabular. */
.more-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 120px;
    row-gap: 72px;
    align-items: start;
}

.more-item{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

/* Images keep their own aspect ratio — nothing is cropped on this page */
.more-item img,
.more-item video{
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    background-color: #e9e9e9;
}

.more-item figcaption{
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
    text-wrap: balance;
}

.more-item figcaption span{
    display: block;
    color: var(--gray);
}

/* The composition. Each piece sits at its own width and drops its own
   distance down the page, so the two columns never line up. Order matches
   the figures in more.html. */
/* Odd items land in the left column, even in the right, so only the even
   rules carry a margin-left. Keep that alternation if the order changes. */
.more-item:nth-child(1){ width: 56%; }                                     
.more-item:nth-child(2){ width: 86%; margin-left: 10%; margin-top: 90px; } 
.more-item:nth-child(3){ width: 78%; margin-top: 50px; }                   
.more-item:nth-child(4){ width: 86%; margin-left: 12%; margin-top: 90px; }
.more-item:nth-child(5){ width: 78%; margin-top: 50px; }                   
.more-item:nth-child(6){ width: 86%; margin-left: 10%; margin-top: 90px; }
.more-item:nth-child(7){ width: 78%; margin-top: 50px; }                   
.more-item:nth-child(8){ width: 86%; margin-left: 12%; margin-top: 90px; } 
.more-item:nth-child(9){ width: 78%; margin-top: 50px; }      
.more-item:nth-child(10){ width: 86%; margin-left: 10%; margin-top: 90px; }           

/* ---------- Responsive ---------- */

@media (max-width: 1100px){
    .more-grid{
        column-gap: 72px;
        row-gap: 72px;
    }
}

@media (max-width: 820px){
    .more{
        padding-bottom: 64px;
    }

    .more-grid{
        grid-template-columns: minmax(0, 1fr);
        row-gap: 56px;
    }

    /* one column — every piece on the full measure, no offsets */
    .more-item,
    .more-item:nth-child(n){
        width: 100%;
        margin-left: 0;
        margin-top: 0;
        gap: 16px;
    }

    /* the one upright video would otherwise fill the whole screen */
    .more-item:nth-child(1){
        width: 72%;
    }
}

@media (max-width: 480px){
    .more-item figcaption{
        font-size: 12px;
    }
}

/* ---------- Sound toggle (Reckless is the only clip with audio) ---------- */

.more-media{
    position: relative;
    line-height: 0;   /* no gap under the video */
}

.sound-toggle{
    position: absolute;
    left: 12px;
    bottom: 12px;
    margin: 0;
    padding: 7px 12px;
    border: var(--rule-weight) solid rgba(252, 252, 252, 0.55);
    border-radius: 80px;
    background-color: rgba(17, 17, 17, 0.45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffffff;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Expands the tap target to ~44px without changing how the pill looks */
.sound-toggle::after{
    content: "";
    position: absolute;
    inset: -9px -6px;
}

.sound-toggle:hover,
.sound-toggle:focus-visible{
    background-color: rgba(17, 17, 17, 0.72);
    border-color: #ffffff;
}