/* ==========================================================
   05 / machines — Small Machines: the films, from the score
   Builds on ../style.css and ../pieces/style.css
   ========================================================== */

.machines-page {
    --machine-gold: #f2b04b;
    --machine-copper: #e88956;
    --machine-blue: #8fb9cc;
    background:
        radial-gradient(circle at 78% 12%, rgba(232, 137, 86, 0.06), transparent 28rem),
        radial-gradient(circle at 12% 56%, rgba(242, 176, 75, 0.04), transparent 32rem),
        var(--bg);
}

.machines-page ::selection {
    background: var(--machine-gold);
    color: var(--bg);
}

/* --- hero ------------------------------------------------- */

.machines-hero {
    padding: clamp(4rem, 9vw, 7rem) 0 clamp(3rem, 6vw, 4.5rem);
}

.machines-hero h1 {
    color: var(--piece-bone);
    font-size: clamp(2.6rem, 8vw, 7rem);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 0.92;
}

.machines-hero-copy {
    display: grid;
    width: min(100%, 54rem);
    align-items: end;
    grid-template-columns: minmax(18rem, 1fr) auto;
    gap: 3rem;
    margin-top: clamp(2.5rem, 6vw, 4.5rem);
}

.machines-hero-copy > p {
    max-width: 48ch;
    color: var(--fg-soft);
    font-size: clamp(1rem, 1.55vw, 1.18rem);
    font-weight: 300;
}

.machines-hero-copy dl {
    display: flex;
    gap: clamp(1.25rem, 3vw, 2.5rem);
}

.machines-hero-copy dl div {
    min-width: 5.2rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--line);
}

.machines-hero-copy dt {
    color: var(--machine-gold);
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

.machines-hero-copy dd {
    margin-top: 0.25rem;
    color: var(--fg-dim);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    line-height: 1.45;
}

/* --- playlist stage --------------------------------------- */

.machines-stage {
    overflow: hidden;
    border: 1px solid var(--line);
    background: rgba(12, 12, 14, 0.66);
    scroll-margin-top: 2rem;
}

.machines-stage > .piece-topline,
.machines-stage > .piece-foot {
    padding: 1rem clamp(1.25rem, 2.5vw, 2rem);
}

.machines-stage .piece-topline span:last-child,
.film .piece-topline span:last-child {
    color: var(--machine-gold);
}

.stage-figure,
.film-player-stage {
    position: relative;
    display: grid;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #070807;
}

.stage-figure {
    place-items: center;
    background:
        radial-gradient(ellipse at 50% 46%, rgba(242, 176, 75, 0.08), transparent 40%),
        linear-gradient(180deg, #08090a, #060706 60%, #050605);
    color: var(--piece-bone);
    font-family: var(--font-mono);
    text-decoration: none;
}

.stage-figure::before,
.stage-figure::after {
    position: absolute;
    background: rgba(222, 214, 198, 0.07);
    content: "";
}

.stage-figure::before {
    top: 50%;
    right: 0;
    left: 0;
    height: 1px;
}

.stage-figure::after {
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
}

.stage-signal {
    position: absolute;
    z-index: 2;
    top: 1.3rem;
    left: 1.3rem;
    color: rgba(222, 214, 198, 0.38);
    font-size: 0.58rem;
    letter-spacing: 0.14em;
}

.stage-mark {
    position: relative;
    z-index: 2;
    display: grid;
    width: min(70%, 34rem);
    justify-items: center;
    gap: 1.4rem;
}

.stage-name {
    color: #f3ece0;
    font-size: clamp(1.05rem, 2.4vw, 1.9rem);
    font-weight: 500;
    letter-spacing: 0.3em;
    text-align: center;
    text-indent: 0.3em;
    text-shadow: 0 0 2rem rgba(0, 0, 0, 0.95);
}

.stage-lineup {
    color: var(--fg-dim);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
}

.stage-strip {
    display: flex;
    width: 100%;
    height: 5px;
    gap: 3px;
}

.stage-strip i {
    display: block;
    height: 100%;
}

.stage-strip .cut-sid {
    background: var(--machine-gold);
}

.stage-strip .cut-paula {
    background: var(--machine-blue);
}

.stage-strip .cut-duo {
    background: linear-gradient(90deg, var(--machine-gold), var(--machine-blue));
}

/* the seven films at their lengths: 2:17 2:31 2:30 2:03 2:54 2:09 2:47 */
.stage-strip i:nth-child(1) { flex: 137; }
.stage-strip i:nth-child(2) { flex: 151; }
.stage-strip i:nth-child(3) { flex: 150; }
.stage-strip i:nth-child(4) { flex: 123; }
.stage-strip i:nth-child(5) { flex: 174; }
.stage-strip i:nth-child(6) { flex: 129; }
.stage-strip i:nth-child(7) { flex: 167; }

.stage-foot a {
    margin-left: auto;
}

/* --- play affordance (stage and films) ---------------------- */

.film-play {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    padding: 2.5rem clamp(1rem, 2.5vw, 2rem) clamp(0.9rem, 2vw, 1.4rem);
    background: linear-gradient(180deg, transparent, rgba(5, 6, 5, 0.82) 55%, rgba(5, 6, 5, 0.94));
    color: var(--fg-soft);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    transition: color 180ms ease;
}

.film-play-mark {
    width: 0;
    height: 0;
    align-self: center;
    border-top: 0.32rem solid transparent;
    border-bottom: 0.32rem solid transparent;
    border-left: 0.5rem solid currentColor;
}

.film-play-note {
    margin-left: auto;
    color: var(--fg-dim);
    font-size: 0.56rem;
    letter-spacing: 0.08em;
    text-align: right;
}

.stage-figure:hover .film-play,
.film-figure:hover .film-play {
    color: var(--machine-gold);
}

.film-player {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
}

.film-player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
}

/* --- the films -------------------------------------------- */

.films {
    padding: clamp(5rem, 10vw, 9rem) 0;
    border-top: 0;
    scroll-margin-top: 2rem;
}

.film-group {
    display: grid;
    grid-template-columns: minmax(8rem, 0.38fr) 1fr;
    gap: 2rem;
    margin: clamp(3rem, 6vw, 5rem) 0 1.25rem;
    color: var(--fg-dim);
    font-family: var(--font-mono);
    font-size: 0.67rem;
    scroll-margin-top: 2rem;
}

.film-group span:first-child {
    color: var(--machine-gold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.film-group-paula span:first-child {
    color: var(--machine-blue);
}

.film-group-single span:first-child {
    color: var(--machine-copper);
}

.collection-head + .film-group {
    margin-top: 0;
}

.film {
    display: grid;
    overflow: hidden;
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
    border: 1px solid var(--line);
    background: rgba(12, 12, 14, 0.66);
    scroll-margin-top: 2rem;
    transition: border-color 220ms ease;
}

.film + .film {
    margin-top: 1rem;
}

.film:hover {
    border-color: var(--line-bright);
}

.film > .piece-topline,
.film > .piece-foot {
    grid-column: 1 / -1;
    padding: 1rem clamp(1.25rem, 2.5vw, 2rem);
}

.film-figure {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-right: 1px solid var(--line);
    background: #070807;
    text-decoration: none;
}

.film-figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease, opacity 220ms ease;
}

.film-figure:hover img {
    opacity: 0.92;
    transform: scale(1.015);
}

.film .film-player {
    border-right: 1px solid var(--line);
}

.film-copy {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem);
}

.film-copy .piece-kind {
    margin-bottom: 0;
}

.film-copy h3 {
    color: var(--piece-bone);
    font-size: clamp(1.7rem, 2.8vw, 2.5rem);
    font-weight: 300;
    letter-spacing: -0.04em;
    line-height: 1.02;
}

.film-copy > p:not(.piece-kind) {
    color: var(--fg-soft);
    font-size: 0.92rem;
    font-weight: 300;
}

.film-chapters {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    list-style: none;
    font-family: var(--font-mono);
    font-size: 0.66rem;
}

.film-chapters li + li {
    margin-top: 0.3rem;
}

.film-chapters a {
    display: flex;
    gap: 0.9rem;
    color: var(--fg-dim);
    text-decoration: none;
    transition: color 180ms ease;
}

.film-chapters a span {
    min-width: 2.6rem;
    color: var(--fg-dim);
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
}

.film-chapters a:hover {
    color: var(--machine-gold);
}

.film-foot a {
    margin-left: auto;
    color: var(--machine-gold);
}

/* --- workshop + note ---------------------------------------- */

.machines-workshop {
    display: grid;
    grid-template-columns: minmax(8rem, 0.38fr) 1fr;
    gap: 2rem;
    padding: clamp(4rem, 8vw, 7rem) 0;
    border-top: 1px solid var(--line);
    scroll-margin-top: 2rem;
}

.machines-workshop .workshop-copy {
    max-width: 48rem;
}

.machines-workshop .workshop-kicker {
    margin-bottom: 1rem;
    color: var(--machine-copper);
    font-size: 0.67rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.machines-workshop h2 {
    color: var(--piece-bone);
    font-size: clamp(2rem, 4.5vw, 4rem);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1;
}

.machines-workshop .workshop-copy > p:last-child {
    max-width: 58ch;
    margin-top: 1.25rem;
    color: var(--fg-soft);
    font-size: 0.95rem;
    font-weight: 300;
}

.machines-workshop .workshop-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    grid-column: 2;
    margin-top: 1.5rem;
    font-size: 0.68rem;
}

.machines-workshop .workshop-links a {
    color: var(--fg-dim);
    text-decoration: none;
    transition: color 180ms ease;
}

.machines-workshop .workshop-links a:first-child,
.machines-workshop .workshop-links a:hover {
    color: var(--machine-gold);
}

.machines-note {
    display: grid;
    grid-template-columns: minmax(8rem, 0.38fr) 1fr;
    gap: 2rem;
    padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 6rem);
    border-top: 1px solid var(--line);
}

.machines-note > p:last-child {
    max-width: 58ch;
    color: var(--fg-dim);
    font-size: 0.88rem;
}

.machines-note a {
    color: var(--fg-soft);
}

/* --- narrow screens ---------------------------------------- */

@media (max-width: 860px) {
    .film {
        grid-template-columns: 1fr;
    }

    .film-figure,
    .film .film-player {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .film-group,
    .machines-workshop,
    .machines-note {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .machines-workshop .workshop-links {
        grid-column: 1;
    }
}

@media (max-width: 620px) {
    .machines-hero-copy {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .machines-hero-copy dl {
        flex-wrap: wrap;
    }

    .stage-figure {
        aspect-ratio: auto;
        min-height: 18rem;
    }

    .stage-mark {
        width: min(88%, 30rem);
    }

    .film-play {
        flex-wrap: wrap;
        row-gap: 0.3rem;
    }

    .film-play-note {
        width: 100%;
        margin-left: 0;
        text-align: left;
    }

    .stage-foot,
    .film-foot {
        align-items: flex-start;
        flex-direction: column;
    }

    .stage-foot a,
    .film-foot a {
        margin-left: 0;
    }
}