/* The collection is a quiet shelf; posters carry the visual weight. */
.media-page-shell { isolation: isolate; }
body:has(.media-page-shell) { overflow-x: clip; }
.content-panel.media-collection-page { --media-inset: 40px; padding-bottom: 48px; }
.media-collection-heading, .media-controls, .media-results-bar { margin-inline: calc(var(--media-inset) - var(--panel-padding-inline)); }
.media-collection-heading { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; gap: 38px; padding: 0 0 36px; }
.media-heading-copy { min-width: 0; }
.media-kicker { margin: 0 0 20px; color: var(--muted); font: 11px/1.6 var(--font-ui); letter-spacing: .16em; }
.media-collection-heading h1 { margin: 0 0 18px; color: var(--ink); font: 600 clamp(34px, 4vw, 52px)/1.25 var(--font-heading); letter-spacing: .02em; }
.media-introduction { max-width: 34em; margin: 0; color: var(--muted); font: 14px/1.9 var(--font-ui); text-wrap: balance; }
.media-statistics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.media-statistics > div { display: flex; flex-direction: column-reverse; gap: 4px; padding-left: 22px; border-left: 1px solid var(--line); }
.media-statistics > div:first-child { padding-left: 0; border: 0; }
.media-statistics dt { color: var(--muted); font: 12px/1.5 var(--font-ui); }
.media-statistics dd { margin: 0; color: var(--ink); font: 400 34px/1.15 var(--font-ui); font-variant-numeric: tabular-nums; }
.media-archive-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font: 12px/1.7 var(--font-ui); }
.media-archive-total strong { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.media-controls { container: media-filters / inline-size; padding: 20px 0 24px; border-block: 1px solid var(--line); font: 13px/1.5 var(--font-ui); }
.media-filter-form { margin: 0; }
.media-controls-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.media-category-tabs { display: flex; flex-wrap: wrap; gap: 0 22px; }
.media-category-tabs a { position: relative; display: inline-flex; align-items: center; gap: 5px; min-height: 44px; color: var(--muted); white-space: nowrap; }
.media-category-tabs small { font-size: 10px; font-variant-numeric: tabular-nums; }
.media-category-tabs a[aria-current] { color: var(--ink); }
.media-category-tabs a[aria-current]::after { position: absolute; inset: auto 0 0; height: 1px; background: var(--accent); content: ''; }
.media-search-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.media-search-field { display: flex; align-items: center; width: 212px; min-height: 36px; padding: 0 10px 0 2px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--paper) 75%, transparent); }
.media-search-field:focus-within { border-color: var(--accent); }
.media-search-field button { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 34px; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.media-search-field svg { width: 16px; height: 16px; }
.media-search-field input[type="search"] { width: 100%; min-width: 0; height: 34px; margin: 0; padding: 0; border: 0; border-radius: 0; outline: 0; background: transparent; box-shadow: none; color: var(--ink); font: 12px/1.5 var(--font-ui); }
.media-search-field input::placeholder { color: var(--muted); opacity: 1; }
.media-search-sort > .media-select { width: 144px; }
.media-controls-bottom { display: grid; grid-template-columns: minmax(0,1fr) 206px; align-items: start; gap: 16px; margin-top: 18px; }
.media-genre-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.media-genre-select { display: none; min-width: 0; }
.media-filter-caption { margin-right: 6px; color: var(--muted); font-size: 12px; }
.media-filter-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 13px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--paper) 75%, transparent); color: var(--muted); font-size: 12px; white-space: nowrap; }
.media-filter-chip[aria-current] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--paper)); color: var(--accent); }
.media-select-filters { display: grid; grid-template-columns: 104px 92px; align-items: start; gap: 10px; }
.media-select { position: relative; min-width: 0; color: var(--muted); }
.media-select select,.media-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; box-sizing: border-box; width: 100%; min-width: 0; min-height: 36px; margin: 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); font: 13px/1.5 var(--font-ui); text-align: left; cursor: pointer; }
.media-select select { appearance: none; padding-right: 30px; }
.media-select select[hidden] { display: none; }
.media-select:not(:has(.media-select-trigger))::after { position: absolute; right: 12px; top: 14px; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); content: ''; pointer-events: none; }
.media-select-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-select-trigger svg { flex: 0 0 14px; width: 14px; height: 14px; color: var(--muted); transition: transform 150ms ease; }
.media-select-trigger[aria-expanded="true"] { border-color: var(--accent); }
.media-select-trigger[aria-expanded="true"] svg { transform: rotate(180deg); color: var(--accent); }
.media-select-menu { position: fixed; z-index: 1400; box-sizing: border-box; padding: 5px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); box-shadow: 0 12px 36px rgb(0 0 0 / 16%); font: 13px/1.5 var(--font-ui); }
.media-select-menu[hidden] { display: none; }
.media-select-option { position: relative; display: block; width: 100%; min-height: 36px; padding: 8px 30px 8px 10px; border: 0; border-radius: var(--radius); background: transparent; color: inherit; font: inherit; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.media-select-option:hover,.media-select-option:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; background: color-mix(in srgb,var(--accent) 6%,var(--paper)); }
.media-select-option[aria-selected="true"] { color: var(--accent); background: color-mix(in srgb,var(--accent) 10%,var(--paper)); }
.media-select-option[aria-selected="true"]::after { position: absolute; right: 12px; top: 13px; width: 5px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); content: ''; }
.media-controls.is-compact .media-controls-bottom { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.media-controls.is-compact .media-genre-filters { display: none; }
.media-controls.is-compact .media-genre-select { display: block; }
.media-controls.is-compact .media-select-filters { display: contents; }
@container media-filters (max-width: 800px) {
    .media-controls-bottom { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
    .media-genre-filters { display: none; }
    .media-genre-select { display: block; }
    .media-select-filters { display: contents; }
}
.media-apply { grid-column: 1 / -1; justify-self: end; min-height: 36px; padding: 4px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); font: 12px/1.5 var(--font-ui); cursor: pointer; }
.media-controls.is-enhanced .media-apply { display: none; }
.media-results-bar { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 24px 0 8px; color: var(--muted); font: 12px/1.7 var(--font-ui); }
.media-results-bar p { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0; }
.media-filter-summary { overflow-wrap: anywhere; }
.media-filter-summary::before { margin-right: 12px; color: var(--line); content: '·'; }
.media-clear-filters { flex-shrink: 0; display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); }
.media-controls :where(a, button, select):focus-visible, .media-results-bar a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.media-controls a:hover { color: var(--accent); }
@media (max-width: 760px) {
    .media-collection-heading { gap: 28px; }
    .media-statistics > div { padding-left: 14px; }
    .media-search-sort { flex: 1 1 100%; justify-content: space-between; }
    .media-search-field { width: min(65%, 300px); }
}
@media (max-width: 520px) {
    .media-collection-heading { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 16px 0 28px; }
    .media-kicker { margin-bottom: 12px; font-size: 10px; }
    .media-collection-heading h1 { font-size: 34px; margin-bottom: 14px; }
    .media-introduction { font-size: 13px; }
    .media-statistics dd { font-size: 28px; }
    .media-archive-total { margin-top: 16px; padding-top: 12px; }
    .media-controls { padding-block: 12px 18px; }
    .media-category-tabs { gap: 0 18px; }
    .media-search-sort { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,144px); gap: 10px; width: 100%; }
    .media-search-sort > .media-select { width: auto; }
    .media-search-field { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; }
    .media-search-field button { width: 36px; height: 42px; }
    .media-search-field input[type="search"] { height: 42px; font-size: 16px; }
    .media-genre-filters { gap: 8px; }
    .media-filter-chip { min-height: 44px; padding-inline: 13px; }
    .media-select select { min-height: 44px; font-size: 16px; }
    .media-select-trigger { min-height: 44px; }
    .media-select-option { min-height: 44px; }
    .media-select:not(:has(.media-select-trigger))::after { top: 18px; }
    .media-results-bar { padding-top: 16px; }
}
.media-collection-page > .media-journal, .media-collection-page > .media-empty { margin-inline: calc(var(--media-inset) - var(--panel-padding-inline)); }
.media-journal, .media-reader-dialog { --media-score: #89601d; --media-star: #d4a11e; --media-hover-strip: 8px; }
:root[data-color-scheme="night"] .media-journal,
:root[data-color-scheme="night"] .media-reader-dialog { --media-score: #e7be76; --media-star: #e7be76; }
.media-dialog-close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); font: 25px/1 var(--font-ui); cursor: pointer; }
.media-months { display: grid; gap: 38px; }
.media-month { display: grid; grid-template-columns: repeat(auto-fill, 151.2px); justify-content: center; column-gap: 11px; min-width: 0; }
.media-month:first-child { padding-top: 16px; }
.media-month-header { display: flex; grid-column: 1 / -1; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 24px; }
.media-month-header h2 { margin: 0; color: var(--ink); font: 500 20px/1.5 var(--font-ui); }
.media-month-header p { margin: 0; padding: 4px 9px; border-radius: var(--radius); color: var(--muted); background: color-mix(in srgb, var(--accent) 7%, var(--paper)); font: 11px/1.5 var(--font-ui); }
.media-journal .media-grid { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; gap: 28px 11px; margin: 0; }
.media-empty { padding: 28px 0; color: var(--muted); }
.media-empty h2 { margin: 0 0 8px; color: var(--ink); font-size: 20px; font-weight: 500; }
.media-journal .media-entry { position: relative; min-width: 0; overflow: visible; background: transparent; border: 0; }
.media-journal .media-entry.is-previewing { z-index: 2; }
.media-card-open { position: relative; display: block; color: var(--ink); cursor: pointer; list-style: none; transition: transform 200ms ease; }
.media-card-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: var(--radius); }
.media-poster-frame { position: relative; display: block; overflow: hidden; aspect-ratio: 2 / 3; border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 9%, var(--paper)); box-shadow: 0 8px 22px #00000024; }
.media-poster-frame > img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity 180ms ease; }
.media-poster-frame > img[hidden] { display: none; }
.media-poster-placeholder { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; color: var(--muted); text-align: center; font: 16px/1.7 var(--font-ui); }
@media (hover: hover) and (pointer: fine) { .media-card-open:hover { transform: translateY(-4px); } }
.media-journal .media-entry-stars { display: flex; align-items: center; gap: 6px; min-height: 20px; margin: 11px 0 0; color: var(--media-score); font: 13px/1.5 var(--font-ui); letter-spacing: .02em; }
.media-journal .media-entry-stars small { margin: 0; color: var(--media-score); font: 12px/1.5 var(--font-ui); letter-spacing: 0; }
.media-journal .media-entry-stars > span { color: var(--media-star); }
.media-journal .media-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; margin: 5px 0 0; color: var(--ink); font: 500 14px/1.4 var(--font-heading); overflow-wrap: anywhere; }
.media-card-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 12px; font: 12px/1.5 var(--font-ui); }
.media-record-details { min-width: 0; }
.media-record-details > summary { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--muted); cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line); }
.media-record-details > summary::-webkit-details-marker { display: none; }
.media-record-details > summary[hidden] { display: none; }
.media-record-details > summary:hover { color: var(--accent); text-decoration-color: currentColor; }
.media-record-details[open] { width: 100%; }
.media-record-content { color: var(--ink); background: var(--paper); font: 15px/1.7 var(--font-body); overflow-wrap: anywhere; }
.media-record-details[open] > .media-record-content { margin-top: 8px; border: 1px solid var(--line); border-radius: var(--radius); }
.media-reader-heading { position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 24px; border-bottom: 1px solid var(--line); background: var(--paper); }
.media-reader-heading p { margin: 0 0 7px; color: var(--muted); font-size: 12px; }
.media-reader-heading h2 { margin: 0; color: var(--ink); font: 500 25px/1.35 var(--font-heading); }
.media-record-content [data-media-reader-close] { display: none; flex-shrink: 0; }
.media-reader-body { padding: 24px; }
.media-reader-ratings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0 0 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.media-reader-ratings dt, .media-reader-meta dt { color: var(--muted); font-size: 12px; }
.media-reader-ratings dd { margin: 6px 0 0; color: var(--media-score); font: 500 23px/1.3 var(--font-ui); }
.media-reader-ratings small { color: var(--muted); font-size: 13px; }
.media-reader-meta { display: grid; gap: 10px; margin: 0; font-size: 13px; }
.media-reader-meta > div { display: grid; grid-template-columns: minmax(72px, 30%) minmax(0, 1fr); gap: 12px; }
.media-reader-meta dt, .media-reader-meta dd { margin: 0; }
.media-reader-note { margin-top: 28px; }
.media-reader-note h3 { margin: 0 0 12px; font: 500 17px/1.5 var(--font-heading); }
.media-reader-note p { margin: 0; white-space: pre-wrap; }
.media-reader-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; }
.media-reader-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; }
.media-reader-links .media-reader-review { color: var(--accent); }
.media-reader-dialog { width: min(580px, calc(100% - 40px)); max-width: none; max-height: calc(100dvh - 60px); margin: auto; padding: 0; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); box-shadow: 0 28px 90px #00000038; }
.media-reader-dialog [data-media-reader-close] { display: grid; }
.media-reader-dialog::backdrop { background: #10171380; backdrop-filter: blur(3px); }
.media-hover-card { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 1101px) {
    .media-entry > .media-hover-card {
        display: flex; flex-direction: column; position: absolute; left: var(--media-hover-left, calc(100% + var(--media-hover-strip))); top: 0;
        box-sizing: border-box; width: var(--media-hover-width, 390px); min-height: min(200px, var(--media-hover-max-height, 520px)); max-height: var(--media-hover-max-height, 520px); overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: thin;
        padding: 14px 14px 12px; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.13);
        background: rgba(18,18,18,.66); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 16px 44px rgba(0,0,0,.42); z-index: 3; pointer-events: none;
        visibility: hidden; opacity: 0; transform: translateY(4px);
        transition: opacity 120ms ease, transform 120ms ease;
    }
    .media-entry.is-previewing > .media-hover-card { visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; }
    .media-entry:not(.is-previewing) > .media-hover-card, .media-entry.is-switching > .media-hover-card { transition: none; }
    .media-journal.is-browsing-posters .media-hover-card { pointer-events: none; }
    .media-hover-card .h-top { flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
    .media-hover-card .h-title { flex: 1; min-width: 0; margin: 0; color: rgba(255,255,255,.95); font: 700 18px/1.22 var(--font-heading); overflow-wrap: anywhere; }
    .media-hover-card .h-db { padding-top: 2px; color: #f5b301; font-size: 16px; font-weight: 750; white-space: nowrap; }
    .media-hover-card .h-badge-row { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 8px; color: rgba(255,255,255,.72); font-size: 13px; }
    .media-hover-card .h-year { opacity: .9; font-weight: 650; }
    .media-hover-card .h-honor { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 9px; border-radius: var(--radius); border: 1px solid rgba(245,179,1,.18); background: rgba(245,179,1,.10); color: rgba(245,179,1,.92); font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .media-hover-card .h-meta { flex: 0 0 auto; margin-bottom: 10px; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.55; }
    .media-hover-card .h-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .media-hover-card .h-comment-box { flex: 0 0 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 10px; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.05); }
    .media-hover-card .h-my-rate { flex: 0 0 auto; margin-bottom: 7px; color: #f5b301; font-size: 13px; font-weight: 700; letter-spacing: .25px; }
    .media-hover-card .h-comment { flex: 1 1 auto; max-height: 260px; overflow: auto; padding-right: 6px; color: rgba(255,255,255,.84); font-size: 13px; line-height: 1.7; white-space: pre-wrap; }
    .media-hover-card .h-review { flex: 0 0 auto; margin-top: 10px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.09); }
    .media-hover-review { display: inline-flex; align-items: center; min-height: 32px; color: #f5b301; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
    .media-hover-review:focus-visible { outline: 2px solid #f5b301; outline-offset: 2px; border-radius: var(--radius); }
    .media-hover-card .h-comment::-webkit-scrollbar { width: 8px; }
    .media-hover-card .h-comment::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: var(--radius); }
    .media-hover-card .h-comment::-webkit-scrollbar-track { background: transparent; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 1101px) {
    /* Keep the reference shelf unchanged; keyboard users can reveal the reader control. */
    .media-record-details:not([open]) > summary:not(:focus-visible) { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
}
.media-journal-pagination { margin-top: 38px; text-align: center; font: 13px/1.6 var(--font-ui); }
.media-load-more { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; margin-top: 4px; }
.media-loading-indicator { display: none; box-sizing: border-box; flex: 0 0 auto; width: 16px; height: 16px; border: 1.5px solid var(--line); border-top-color: var(--accent); border-right-color: var(--accent); border-radius: 50%; }
.media-load-more[aria-busy="true"] .media-loading-indicator, .media-poster-frame.is-loading .media-loading-indicator { display: block; animation: media-loading-reveal 120ms step-end both, media-loading-spin .8s linear infinite; }
.media-load-more[aria-busy="true"] { color: var(--muted); cursor: progress; opacity: 1; }
.media-load-more[aria-busy="true"]::after { display: none; }
.media-poster-loading { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; background: var(--paper); }
.media-poster-frame.is-loading .media-poster-loading { display: flex; }
.media-poster-frame.is-loading > img { opacity: 0; }
.media-poster-frame.is-loaded > img { animation: media-poster-reveal .18s ease-out both; }
@keyframes media-loading-spin { to { transform: rotate(360deg); } }
@keyframes media-loading-reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes media-poster-reveal { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .media-load-more[aria-busy="true"] .media-loading-indicator, .media-poster-frame.is-loading .media-loading-indicator { animation: none; }
    .media-poster-frame.is-loaded > img { animation: none; }
    .media-poster-frame > img { transition: none; }
}
.media-load-more[hidden] { display: none; }
.media-page-navigation { display: flex; justify-content: center; align-items: center; gap: 25px; margin-top: 20px; color: var(--muted); }
.media-page-navigation a { display: inline-block; padding: 10px; }
.media-journal.is-enhanced[data-first-page="true"] .media-page-navigation { display: none; }
.media-journal :where(button, a, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.media-reader-dialog :where(button, a):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
html.media-dialog-open { overflow: hidden; }
@media (max-width: 1000px) {
    .content-panel.media-collection-page { --media-inset: 28px; padding-bottom: 40px; }
}
@media (max-width: 760px) {
    .content-panel.media-collection-page { --media-inset: 20px; }
}
@media (max-width: 520px) {
    .content-panel.media-collection-page { --media-inset: 0px; padding-bottom: 35px; border: 0; background: transparent; }
    .media-months { gap: 32px; }
    .media-month { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .media-month-header { margin-bottom: 16px; }
    .media-journal .media-grid { row-gap: 25px; }
    .media-journal .media-card-title { font-size: 15px; }
    .media-journal .media-entry-stars { font-size: 12px; }
    .media-reader-dialog { position: fixed; inset: auto 0 0; width: 100%; max-height: calc(100dvh - 24px); margin: 0; border: 0; border-radius: var(--radius) var(--radius) 0 0; }
    .media-reader-dialog .media-reader-body { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
    .media-reader-heading, .media-reader-body { padding: 22px; }
    .media-reader-heading h2 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .media-journal *, .media-reader-dialog *, .media-select-trigger svg { transition: none !important; animation: none !important; }
}