:root {
    --paper: #f5f2eb;
    --ink: #3a3a38;
    --muted: #9a968d;
    --cols: 9ch minmax(0, 1fr) 27ch 14ch;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

/* Stop iPhone Safari enlarging text in wide, sideways-scrolling rows */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 14px;
    line-height: 1.7;
}

a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--muted);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

a:hover {
    text-decoration-color: currentColor;
}

.ledger {
    padding: 4rem clamp(1.25rem, 5vw, 3rem) 5rem;
}

h1,
h2 {
    font-size: 1em;
    font-weight: 500;
    margin: 0;
}

.ledger > header h1 {
    margin-bottom: 1.5rem;
}

.ledger > .contact {
    margin: 0 0 2.5rem;
}

header p {
    margin: 0 0 2.5rem;
    color: var(--muted);
}

/* Show / hide */

.filters {
    margin: 0 0 2.5rem;
}

.filter-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 2ch;
}

.filter-line + .filter-line {
    margin-top: 0.25rem;
}

.filter-name {
    flex: 0 0 12ch;
    color: var(--muted);
}

.filters label {
    cursor: pointer;
    white-space: nowrap;
}

.filters input {
    margin: 0 0.5ch 0 0;
    accent-color: var(--ink);
    vertical-align: -0.1em;
}

.filters .count {
    color: var(--muted);
}

/* Rows: 2026.....The Long Haul.....Feature Film.....Released */

.ledger-head,
.ledger-rows li {
    display: grid;
    grid-template-columns: var(--cols);
}

.ledger-head {
    margin-bottom: 0.5rem;
}

.sort {
    font: inherit;
    color: var(--muted);
    background: none;
    border: 0;
    padding: 0;
    text-align: left;
    cursor: pointer;
}

.sort:hover,
.sort[aria-sort="ascending"],
.sort[aria-sort="descending"] {
    color: var(--ink);
}

.sort[aria-sort="ascending"]::after {
    content: " ↑";
}

.sort[aria-sort="descending"]::after {
    content: " ↓";
}

.ledger-rows {
    list-style: none;
    margin: 0 0 4rem;
    padding: 0;
}

.ledger-rows li[hidden] {
    display: none;
}

.ledger-rows .c {
    display: flex;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
}

/* Long titles wrap rather than being cut off; dots fill the last line */
.ledger-rows .c {
    align-items: flex-end;
}

.ledger-rows .date {
    align-items: flex-start;
}

.ledger-rows .title .t {
    white-space: normal;
}

.ledger-rows .date::after,
.ledger-rows .title::after,
.ledger-rows .type::after {
    content: "........................................................................................................................................................................................................................................";
    flex: 1;
    min-width: 2ch;
    overflow: hidden;
    margin: 0 1ch;
    color: var(--muted);
}

.ledger-rows .date::after {
    margin-left: 0;
}

/* Footnotes sit back in grey */

.ledger-rows li.fn {
    color: var(--muted);
}

.contact p {
    margin: 0;
}

/* Sheets: on narrow screens the list keeps its desktop layout and
   scrolls sideways, like a spreadsheet. The year column stays put. */

.sheet {
    overflow-x: auto;
    margin: 0 0 4rem;
}

.sheet .ledger-rows {
    margin-bottom: 0;
}

/* Project pages */

.page header {
    margin-bottom: 2.5rem;
}

.crumb {
    margin: 0 0 1.5rem;
    color: var(--ink);
}

.page h1 {
    font-size: 1em;
    font-weight: 500;
}

.page h2 {
    margin: 0 0 0.75rem;
    color: var(--muted);
    font-weight: 400;
}

.block {
    margin: 0 0 2.5rem;
}

.block .sheet {
    margin-bottom: 0;
}

.prose {
    margin: 0 0 1.5rem;
}

.note {
    color: var(--muted);
}

/* Two-part leader rows: Cinematography ........ Mika Altskan */

.pairs {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
}

.facts {
    margin-bottom: 2.5rem;
}

.pairs li {
    display: flex;
    white-space: nowrap;
    min-width: max-content;
}

.pairs .l,
.pairs .r {
    flex: none;
}

.pairs .r {
    order: 2;
}

/* Dots between the two parts, only when there is a right-hand part */
.pairs li:has(.r)::before {
    content: "................................................................................................................................................................";
    order: 1;
    flex: 1 1 0;
    width: 0;
    min-width: 4ch;
    overflow: hidden;
    margin: 0 1ch;
    color: var(--muted);
}

/* Media: every image sits at the same height */

/* Whole image, never cropped: no taller than 18rem, no wider than the page */
.still {
    display: block;
    width: auto;
    height: auto;
    max-height: 18rem;
    max-width: 100%;
    margin: 0 0 2.5rem;
}

.video {
    position: relative;
    width: 100%;
    max-width: 48rem;
    aspect-ratio: 16 / 9;
    margin: 0 0 2.5rem;
}

.video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Justified rows: each row fills the width exactly and no image is
   cropped. Every image grows in proportion to its width / height (--r);
   the spacer stops the last row stretching. */

.plates,
.covers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0 0 2.5rem;
    --row: 16rem;
}

.plates::after,
.covers::after {
    content: "";
    flex-grow: 1000000;
}

.plates a,
.covers a {
    display: block;
    flex: calc(var(--r) * 100) 1 calc(var(--r) * var(--row));
    min-width: 0;
}

.plates img,
.covers img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 760px) {
    body {
        font-size: 13px;
    }

    /* One line per row; the sheet scrolls sideways instead of wrapping */
    .sheet > .ledger-head,
    .sheet > .ledger-rows {
        width: var(--sheet-width, 120ch);
    }
    .ledger-rows .title .t {
        white-space: nowrap;
    }
    .ledger-rows .c {
        align-items: center;
    }
    .sheet .date {
        position: sticky;
        left: 0;
        z-index: 1;
        background: var(--paper);
    }

    .still {
        max-height: 11rem;
    }

    /* Checkboxes: one line per group, swiped sideways; group name pinned */
    .filter-line {
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
    }
    .filter-line::-webkit-scrollbar {
        display: none;
    }
    .filter-line + .filter-line {
        margin-top: 0.5rem;
    }

    /* Contact lines: one line each, swiped sideways */
    .contact p {
        white-space: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .contact p::-webkit-scrollbar {
        display: none;
    }
    .filter-name {
        position: sticky;
        left: 0;
        z-index: 1;
        background: var(--paper);
        padding-right: 1ch;
    }
    .plates,
    .covers {
        --row: 8rem;
        gap: 0.5rem;
    }
}