:root {
    --navy: #182241;
    --navy-2: #12192f;
    --cream: #fffcf5;
    --yellow: #ffea95;
    --muted: rgba(255, 252, 245, 0.68);
    --line: rgba(255, 252, 245, 0.16);
    --danger: #e07a6a;
    --tag-0: #ffe566;
    --tag-1: #fff8e8;
    --tag-2: #ff6b57;
    --tag-3: #ffbf3c;
    --tag-4: #ff8a3c;
    --tag-5: #e8d48a;
    --tag-6: #9ed46a;
    --tag-7: #3dceaa;
    --tag-8: #4aa8ff;
    --tag-9: #7b8cff;
    --tag-10: #d07cff;
    --tag-11: #ff7ab0;
    --tag-12: #ffc48a;
    --tag-13: #5ee0c0;
    --tag-14: #e0a04a;
    --tag-15: #fff06a;
    --tag-16: #7ad4ff;
    --tag-17: #ff5a8c;
    --tag-18: #e07040;
    --tag-19: #c8e040;
    --display: "Boldonse", "Palatino Linotype", serif;
    --serif: "Sansita", Georgia, serif;
    --sans: "Nunito Sans", "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    background: var(--navy);
    color: var(--cream);
    font-family: var(--sans);
}

body {
    padding: 0 28px 96px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 28px 0 18px;
}

.wordmark {
    font-family: var(--display);
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    color: var(--yellow);
    text-decoration: none;
    letter-spacing: 0.02em;
    line-height: 1;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

.site-nav a {
    font-family: var(--serif);
    color: var(--cream);
    text-decoration: none;
    font-size: 1.05rem;
}

.site-nav a[aria-current="page"] {
    color: var(--yellow);
}

.nav-cta {
    border: 1px solid var(--cream);
    padding: 10px 20px;
    border-radius: 6px;
    font-family: var(--display) !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.04em;
}

.nav-cta:hover { background: var(--cream); color: var(--navy) !important; }

.hero,
.search-panel,
.gallery {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}

.hero {
    padding: 36px 0 12px;
}

.tagline {
    margin: 0 0 10px;
    font-family: var(--serif);
    font-style: italic;
    color: var(--yellow);
    font-size: 1.15rem;
}

.hero h1 {
    margin: 0 0 10px;
    font-family: var(--display);
    font-size: clamp(2.4rem, 6vw, 4.6rem);
    line-height: 0.95;
    color: var(--cream);
    font-weight: 400;
}

.lede {
    margin: 0;
    color: var(--muted);
    max-width: 36rem;
}

.hero-note {
    margin: 10px 0 0;
    color: var(--muted);
    max-width: 36rem;
    font-size: 0.95rem;
}

.hero-note a {
    color: var(--yellow);
    text-decoration: none;
}

.hero-note a:hover {
    text-decoration: underline;
}

.search-panel {
    position: sticky;
    top: 0;
    z-index: 5;
    background: rgba(24, 34, 65, 0.92);
    padding: 18px 0 8px;
}

.search-row { display: flex; gap: 10px; }

input[type="search"],
input[type="password"] {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    color: var(--cream);
    border-radius: 0;
    padding: 12px 0;
    font-family: var(--serif);
    font-size: 1.15rem;
    outline: none;
}

input:focus { border-bottom-color: var(--yellow); }

button {
    font-family: var(--display);
    cursor: pointer;
    border: 0;
    border-radius: 6px;
    background: var(--cream);
    color: var(--navy);
    padding: 10px 16px;
    letter-spacing: 0.03em;
}

button:hover { background: var(--yellow); }

#clear-filters,
#toggle-hide {
    background: transparent;
    color: var(--cream);
    border: 1px solid var(--line);
}

#toggle-hide.is-active,
#toggle-hide[aria-pressed="true"] {
    border-color: var(--danger);
    color: var(--danger);
}

.tag.hide-filter {
    border-color: var(--danger);
    color: var(--danger);
}

.tag.hide-filter:hover {
    border-color: var(--danger);
    color: var(--cream);
    background: transparent;
}

.suggestions,
.active-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.suggestions button,
.tag {
    background: transparent;
    color: var(--cream);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 6px 12px;
    font-family: var(--serif);
    font-size: 0.95rem;
}

.suggestions button:hover,
.tag:hover,
.tag.active {
    border-color: var(--yellow);
    color: var(--yellow);
    background: transparent;
}

.status {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 0.92rem;
}

.status.is-error {
    color: var(--danger);
}

.bulk-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 14px 0 4px;
}

.bulk-bar .meta {
    margin: 0;
}

.bulk-bar select {
    font-family: var(--serif);
    font-size: 1rem;
    background: transparent;
    color: var(--cream);
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    padding: 9px 4px;
    outline: none;
}

.bulk-bar input[type="text"] {
    font-family: var(--serif);
    font-size: 1rem;
    background: transparent;
    color: var(--cream);
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    padding: 9px 4px;
    outline: none;
    min-width: 10rem;
}

.bulk-bar input[type="text"]:focus {
    border-bottom-color: var(--yellow);
}

.bulk-bar select:focus {
    border-bottom-color: var(--yellow);
}

.bulk-bar select option {
    color: var(--navy);
}

.bulk-bar button[hidden],
.bulk-bar label[hidden],
.bulk-bar .meta[hidden] {
    display: none !important;
}

.card.is-selected .thumb {
    outline: 2px solid var(--yellow);
}

.gallery.is-selecting .play {
    opacity: 0.28;
}

.gallery.is-selecting .card.is-selected .play {
    opacity: 1;
    background: var(--yellow);
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 22px;
    padding-top: 28px;
}

.card {
    display: flex;
    flex-direction: column;
    gap: 0;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.card[hidden] {
    display: none !important;
}

.card:hover .thumb img { transform: scale(1.04); }
.card:hover .thumb { outline: 1px solid var(--yellow); }

.card.is-offline .play { display: none; }

.thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--navy-2);
}

.thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}

.play {
    position: absolute;
    inset: auto 16px 16px auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--cream);
    color: var(--navy);
    display: grid;
    place-items: center;
}

.play::before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 0 7px 12px;
    border-color: transparent transparent transparent var(--navy);
    margin-left: 3px;
}

.card h3 {
    margin: 12px 0 2px;
    font-family: var(--serif);
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.meta {
    margin: 0;
    color: var(--muted);
    font-family: var(--serif);
    font-size: 0.8rem;
}

.card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--chip, var(--yellow));
    font-family: var(--serif);
    font-size: 0.82rem;
}

.card-tags .tag-chip-label {
    cursor: pointer;
}

.tag-swatch {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    padding: 0;
    box-sizing: border-box;
    border-radius: 50%;
    border: 1px solid currentColor;
    background: var(--chip, transparent);
    flex-shrink: 0;
    position: relative;
    z-index: 3;
    cursor: pointer;
}

.editor-tags .tag-swatch,
.editor-tags .tag-swatch:hover {
    width: 22px;
    height: 22px;
    min-width: 22px;
    padding: 0;
    border-radius: 50%;
    background: var(--chip, transparent);
    border: 1px solid currentColor;
    color: inherit;
}

.tag-colour-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 12px 0 4px;
    padding: 12px 0 4px;
    border-top: 1px solid var(--line);
}

.tag-colour-bar[hidden] {
    display: none !important;
}

.tag-colour-bar.is-floating {
    position: fixed;
    z-index: 10000;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-top: 1px solid var(--line);
    border-radius: 8px;
    background: var(--navy-2, #1e2a4a);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.tag-colour-bar .meta {
    margin: 0;
    width: 100%;
}

.tag-colour-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tag-colour-swatches .swatch {
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    border-radius: 4px;
    border: 1px solid var(--line);
}

.tag-colour-inline {
    flex-basis: 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 8px 0 4px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--navy-2);
    position: relative;
    z-index: 4;
}

.tag-colour-inline .meta {
    margin: 0;
    width: 100%;
}

.tag-swatch.is-empty {
    background: transparent;
}

.thumb-corner {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 3;
    background: none;
    border-style: solid;
}

.thumb-corner-tl {
    top: 0;
    left: 0;
    border-width: 48px 48px 0 0;
    border-color: var(--chip) transparent transparent transparent;
}

.thumb-corner-tr {
    top: 0;
    right: 0;
    border-width: 0 48px 48px 0;
    border-color: transparent var(--chip) transparent transparent;
}

.thumb-corner-br {
    bottom: 0;
    right: 0;
    border-width: 0 0 48px 48px;
    border-color: transparent transparent var(--chip) transparent;
}

.thumb-corner-bl {
    bottom: 0;
    left: 0;
    border-width: 48px 0 0 48px;
    border-color: transparent transparent transparent var(--chip);
}

.player-modal {
    width: min(960px, 94vw);
    border: 0;
    border-radius: 0;
    background: var(--navy-2);
    color: var(--cream);
    padding: 18px;
}

.player-modal::backdrop { background: rgba(18, 25, 47, 0.84); }

.modal-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.modal-heading {
    min-width: 0;
}

.modal-heading h2 {
    margin: 0;
    font-family: var(--serif);
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.modal-heading .meta {
    margin: 2px 0 0;
}

.credit-line {
    display: block;
    margin: 4px 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    font-family: var(--serif);
    font-size: 0.8rem;
    letter-spacing: 0;
    text-align: left;
    cursor: pointer;
}

.credit-line:hover {
    background: transparent;
    color: var(--yellow);
}

.card .credit-line {
    margin-top: 2px;
}

#close-modal {
    background: transparent;
    color: var(--cream);
    border: 1px solid var(--line);
}

video {
    width: 100%;
    max-height: 70vh;
    background: #000;
}

.modal-tags {
    color: var(--muted);
    margin: 10px 0 0;
    font-family: var(--serif);
}

.tag-editor {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.editor-label {
    margin: 0 0 8px;
    font-family: var(--serif);
    color: var(--yellow);
}

.editor-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 2rem;
}

.editor-tags button {
    background: transparent;
    color: var(--cream);
    border: 1px solid var(--line);
    font-family: var(--serif);
    font-size: 0.95rem;
    padding: 5px 10px;
}

.editor-tags button:hover {
    border-color: var(--yellow);
    color: var(--yellow);
    background: transparent;
}

.editor-tags span,
.editor-tags .tag-chip {
    color: var(--chip, var(--yellow));
    font-family: var(--serif);
    font-size: 0.95rem;
}

.editor-row {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.editor-row[hidden],
#save-tags[hidden],
#delete-video[hidden],
.collection-picker[hidden] {
    display: none !important;
}

.collection-picker {
    margin-top: 16px;
}

.selection-editor {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.selection-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    align-items: center;
}

.selection-controls button {
    background: transparent;
    color: var(--cream);
    border: 1px solid var(--line);
    font-family: var(--serif);
    font-size: 0.95rem;
    padding: 5px 10px;
    letter-spacing: normal;
}

.selection-controls button:hover:not(:disabled) {
    border-color: var(--yellow);
    color: var(--yellow);
    background: transparent;
}

.selection-controls button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.selection-controls input {
    min-width: 140px;
    flex: 1 1 140px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    color: var(--cream);
    font-family: var(--serif);
    font-size: 1.05rem;
    padding: 8px 0;
    outline: none;
}

.selection-controls input:focus {
    border-bottom-color: var(--yellow);
}

.selection-draft {
    margin: 0 0 8px;
}

.selection-timeline {
    margin: 8px 0 4px;
}

.selection-track {
    position: relative;
    height: 8px;
    background: var(--ink-2, #1c1916);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
}

.selection-range {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--yellow);
    opacity: 0.85;
}

.selection-range.draft {
    background: var(--cream);
    opacity: 0.7;
}

.selection-range.draft-in {
    width: 4px !important;
    background: var(--cream);
}

.selection-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.selection-item {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-family: var(--serif);
    font-size: 0.9rem;
    color: var(--cream);
}

.selection-item button {
    background: transparent;
    color: var(--cream);
    border: 1px solid var(--line);
    font-family: var(--serif);
    font-size: 0.85rem;
    padding: 4px 8px;
    letter-spacing: normal;
}

.selection-item button:hover {
    border-color: var(--yellow);
    color: var(--yellow);
    background: transparent;
}

.collection-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
}

.collection-option {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--cream);
    font-family: var(--serif);
    cursor: pointer;
}

.collection-option input {
    accent-color: var(--yellow);
}

.collection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.tag-browser-search {
    margin: 0 0 18px;
}

.tag-browser-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.tag-browser-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid var(--line);
    padding: 16px 18px;
    min-height: 6.5rem;
}

.tag-browser-link {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.tag-browser-link:hover .tag-browser-name {
    color: var(--yellow);
}

.tag-browser-name {
    font-family: var(--serif);
    font-size: 1.15rem;
    color: var(--chip, var(--cream));
    overflow-wrap: anywhere;
}

.tag-browser-delete {
    margin-top: 0;
    align-self: flex-start;
}

.tag.is-locked,
.tag.is-locked:hover {
    opacity: 0.85;
    cursor: default;
    border-color: var(--yellow);
    color: var(--yellow);
    background: transparent;
}

.collection-card {
    border: 1px solid var(--line);
    padding: 0 0 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}

.collection-card a {
    color: inherit;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.collection-card .thumb {
    border-bottom: 1px solid var(--line);
}

.collection-card h2,
.collection-card .meta {
    padding: 0 18px;
}

.collection-card h2 {
    margin: 0;
    padding-top: 4px;
    font-family: var(--serif);
    font-size: 1.35rem;
    font-weight: 400;
    color: var(--yellow);
}

.collection-card .danger-button {
    align-self: flex-start;
    margin-left: 18px;
}

.hero .tagline a {
    color: var(--yellow);
    text-decoration: none;
}

.hero .tagline a:hover {
    text-decoration: underline;
}

.editor-row input[type="text"] {
    flex: 1;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    color: var(--cream);
    font-family: var(--serif);
    font-size: 1.05rem;
    padding: 8px 0;
    outline: none;
}

.editor-row input[type="text"]:focus {
    border-bottom-color: var(--yellow);
}

.editor-status {
    margin: 8px 0 0;
    min-height: 1.2em;
    color: var(--muted);
    font-size: 0.88rem;
}

.editor-status.is-error { color: var(--danger); }

.danger-button {
    margin-top: 16px;
    background: transparent;
    color: var(--cream);
    border: 1px solid var(--danger);
    font-family: var(--serif);
}

.danger-button:hover {
    background: var(--danger);
    color: var(--cream);
}

.login-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.login-card {
    width: min(440px, 100%);
    text-align: left;
}

.login-card .wordmark {
    display: block;
    margin-bottom: 12px;
}

.login-card h1 {
    font-family: var(--display);
    font-size: 2.6rem;
    font-weight: 400;
    margin: 8px 0 12px;
}

.login-card form {
    display: grid;
    gap: 10px;
    margin-top: 22px;
}

.login-card label {
    font-family: var(--serif);
    color: var(--muted);
}

.accounts-panel {
    max-width: 1240px;
    margin: 0 auto;
    padding: 12px 0 48px;
}

.account-form {
    margin: 0 0 36px;
    padding: 22px 0;
    border-top: 1px solid var(--line);
}

.account-form h2 {
    margin: 0 0 16px;
    font-family: var(--serif);
    font-size: 1.4rem;
    font-weight: 400;
}

.account-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px 18px;
    align-items: end;
}

.account-form-grid label {
    display: grid;
    gap: 6px;
    font-family: var(--serif);
    color: var(--muted);
}

.account-form-grid input,
.account-form-grid select {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    color: var(--cream);
    border-radius: 0;
    padding: 10px 0;
    font-family: var(--serif);
    font-size: 1.05rem;
    outline: none;
}

.account-form-grid select option {
    color: var(--navy);
}

.accounts-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--serif);
}

.accounts-table th,
.accounts-table td {
    text-align: left;
    padding: 12px 10px 12px 0;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.accounts-table th {
    color: var(--muted);
    font-weight: 400;
}

.accounts-table .danger-button {
    margin-top: 0;
    padding: 6px 12px;
    font-size: 0.78rem;
}

.login-card input[type="text"] {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    color: var(--cream);
    border-radius: 0;
    padding: 12px 0;
    font-family: var(--serif);
    font-size: 1.15rem;
    outline: none;
}

.error { color: var(--danger); }

.empty {
    grid-column: 1 / -1;
    color: var(--muted);
    border-top: 1px solid var(--line);
    padding: 48px 0;
    text-align: left;
    font-family: var(--serif);
    font-size: 1.2rem;
}

.empty[hidden] {
    display: none !important;
}

.upload-steps {
    max-width: 40rem;
    margin: 12px 0 0;
    padding-left: 1.2rem;
    color: var(--muted);
    font-family: var(--serif);
    line-height: 1.45;
}

.upload-steps li {
    margin: 0 0 8px;
}

.help-intro {
    max-width: 42rem;
    margin: 12px 0 0;
    color: var(--muted);
    font-family: var(--serif);
    line-height: 1.5;
}

.help-intro strong {
    color: var(--cream);
    font-weight: 600;
}

.help-panel {
    max-width: 1240px;
    margin: 0 auto;
    padding: 12px 0 64px;
}

.help-toc {
    margin: 0 0 36px;
    padding: 18px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.help-toc ol {
    margin: 8px 0 0;
    padding-left: 1.2rem;
    font-family: var(--serif);
    line-height: 1.6;
}

.help-toc a {
    color: var(--cream);
    text-decoration: none;
}

.help-toc a:hover {
    color: var(--yellow);
    text-decoration: underline;
}

.help-role {
    margin: 0 0 48px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    scroll-margin-top: 24px;
}

.help-role.is-current h2::after {
    content: " · your role";
    color: var(--muted);
    font-size: 0.85rem;
}

.help-role h2 {
    margin: 0 0 6px;
    font-family: var(--serif);
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--yellow);
}

.help-role .role-meta {
    margin: 0 0 24px;
    color: var(--muted);
    font-family: var(--serif);
    font-size: 0.95rem;
}

.help-feature {
    margin: 0 0 28px;
}

.help-feature h3 {
    margin: 0 0 10px;
    font-family: var(--serif);
    font-size: 1.12rem;
    font-weight: 400;
    color: var(--cream);
}

.help-feature ol {
    max-width: 44rem;
    margin: 0;
    padding-left: 1.2rem;
    color: var(--muted);
    font-family: var(--serif);
    line-height: 1.5;
}

.help-feature li {
    margin: 0 0 8px;
}

.help-feature li strong {
    color: var(--cream);
    font-weight: 600;
}

.help-feature code {
    font-family: var(--sans);
    font-size: 0.9em;
    color: var(--cream);
}

.help-figure {
    margin: 16px 0 0;
    max-width: 960px;
}

.help-figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--navy-2);
}

.upload-panel {
    max-width: 1240px;
    margin: 28px auto 0;
}

.upload-picker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    position: relative;
}

.upload-picker span {
    font-family: var(--display);
    background: var(--cream);
    color: var(--navy);
    padding: 10px 16px;
    border-radius: 6px;
}

.upload-picker input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.upload-queue {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
}

.upload-item {
    border-top: 1px solid var(--line);
    padding: 14px 0;
}

.upload-name {
    margin: 0;
    font-family: var(--serif);
}

.upload-status {
    margin: 6px 0 0;
    color: var(--muted);
}

.upload-saved-as {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 0.95rem;
}

.upload-item.is-failed .upload-status {
    color: var(--danger);
}

.upload-item button {
    margin-top: 8px;
}

.email-inline {
    display: flex;
    gap: 8px;
    align-items: center;
}

.email-inline input {
    min-width: 12rem;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    color: var(--cream);
    font-family: var(--serif);
    padding: 6px 0;
}

.email-inline button {
    padding: 6px 12px;
    font-size: 0.85rem;
}

.cinema-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    max-width: 1240px;
    margin: 0 auto 8px;
}

.cinema-collection {
    min-width: min(100%, 16rem);
}

.cinema-collection select {
    width: 100%;
    background: transparent;
    color: var(--cream);
    border: 0;
    border-bottom: 1px solid var(--line);
    font-family: var(--serif);
    font-size: 1.05rem;
    padding: 6px 0;
}

.cinema-bar button:disabled {
    opacity: 0.45;
    cursor: default;
}

#cinema-status {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}

.cinema-stage {
    max-width: 1240px;
    margin: 12px auto 0;
}

.cinema-stage[hidden] {
    display: none !important;
}

.cinema-stage video {
    max-height: 72vh;
}

.cinema-info {
    margin-top: 12px;
}

.cinema-info h2 {
    margin: 0 0 2px;
    font-family: var(--serif);
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.cinema-info .credit-line {
    cursor: default;
}

.cinema-info .credit-line:hover {
    color: var(--muted);
}

@media (max-width: 720px) {
    body { padding: 0 16px 72px; }
    .site-header { flex-wrap: wrap; }
    .site-nav { gap: 16px; }
    .search-row { flex-direction: column; }
}