:root {
    --gallery-bg: #f7f5f1;
    --gallery-surface: #fff;
    --gallery-ink: #252629;
    --gallery-muted: #746b65;
    --gallery-line: #e1dcd5;
    --gallery-brand: #a51d2b;
    --gallery-paper: #ebe7e0;
    --gallery-focus: #a51d2b;
    --gallery-radius: 9px;
    --gallery-sans: Outfit, sans-serif;
    --gallery-display: 'League Spartan', sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--gallery-bg); color: var(--gallery-ink); font: 14px/1.5 var(--gallery-sans); }
button, input, select { font: inherit; color: inherit; }
button, select { cursor: pointer; }
a { color: inherit; }
a, button, input, select { -webkit-tap-highlight-color: transparent; }
:is(a, button, input, select):focus-visible { outline: 2px solid var(--gallery-focus); outline-offset: 4px; }
button:disabled { cursor: wait; opacity: .6; }
.skip-link { position: fixed; top: 8px; left: 8px; transform: translateY(-150%); z-index: 10; padding: 12px 18px; background: var(--gallery-ink); color: white; border-radius: 4px; }
.skip-link:focus { transform: translateY(0); }
.gallery-header { display: flex; align-items: center; gap: 44px; min-height: 80px; padding: 16px max(28px, calc((100vw - 1440px) / 2)); background: var(--gallery-surface); border-bottom: 1px solid var(--gallery-line); }
.gallery-brand { display: flex; align-items: center; gap: 17px; font: 800 29px/1 var(--gallery-display); letter-spacing: -.7px; color: var(--gallery-brand); text-decoration: none; flex-shrink: 0; }
.gallery-brand span { font: 500 10px/1.2 var(--gallery-sans); letter-spacing: 1.6px; color: var(--gallery-muted); border-left: 1px solid var(--gallery-line); padding: 5px 0 5px 17px; }
.gallery-header nav { display: flex; align-items: center; gap: 26px; }
.gallery-header nav a { text-decoration: none; font-size: 12px; padding: 10px 0; }
.gallery-nav-current { color: var(--gallery-brand); border-bottom: 2px solid var(--gallery-brand); }
.gallery-nav-secondary { color: var(--gallery-muted); }
.gallery-nav-secondary span { margin-left: 5px; }
.gallery-header > .gallery-button { margin-left: auto; }
.gallery-button { display: inline-flex; justify-content: center; align-items: center; gap: 9px; min-height: 44px; border: 1px solid var(--gallery-line); border-radius: var(--gallery-radius); background: white; padding: 11px 17px; font-size: 13px; font-weight: 500; text-decoration: none; transition: background 150ms, border-color 150ms; }
.gallery-button:hover { border-color: var(--gallery-brand); }
.gallery-button--primary { background: var(--gallery-brand); border-color: var(--gallery-brand); color: white; }
.gallery-button--primary:hover { background: #8e1925; }
.gallery-button--primary > span { font-size: 22px; line-height: 16px; font-weight: 400; }
.gallery-main { width: min(1440px, calc(100% - 56px)); margin: 0 auto; padding-bottom: 64px; }
.gallery-main:focus { outline: none; }
.gallery-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding: 48px 0 34px; }
.gallery-eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; font-size: 10px; letter-spacing: 1.8px; color: var(--gallery-muted); }
.gallery-eyebrow > span { width: 7px; height: 7px; background: var(--gallery-brand); }
h1 { font: 700 clamp(35px, 3.5vw, 51px)/1.03 var(--gallery-display); letter-spacing: -1.2px; margin: 0 0 12px; }
h1 > span { color: var(--gallery-brand); }
.gallery-description { color: var(--gallery-muted); margin: 0; font-size: 14px; }
.gallery-total { display: flex; align-items: center; gap: 13px; max-width: 210px; margin: 0 0 3px; padding-left: 26px; border-left: 1px solid var(--gallery-line); }
.gallery-total strong { font: 600 45px/1 var(--gallery-display); letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.gallery-total span { font-size: 11px; line-height: 1.5; color: var(--gallery-muted); }
.gallery-filters { display: grid; grid-template-columns: minmax(240px, 1.9fr) minmax(150px, 1fr) minmax(130px, .8fr) minmax(160px, .9fr); gap: 16px; padding: 24px 0; border-top: 1px solid var(--gallery-line); border-bottom: 1px solid var(--gallery-line); }
.gallery-filters label { display: block; font-size: 11px; font-weight: 500; margin-bottom: 7px; }
.gallery-filters select, .gallery-search-wrap { background: var(--gallery-surface); border: 1px solid #d8d1c9; border-radius: 7px; min-height: 45px; width: 100%; }
.gallery-filters select { padding: 10px 30px 10px 12px; font-size: 12px; text-overflow: ellipsis; }
.gallery-filter-field { min-width: 0; }
.gallery-search-wrap { display: flex; align-items: center; padding: 0 12px; gap: 10px; }
.gallery-search-wrap svg { color: var(--gallery-muted); flex-shrink: 0; }
.gallery-search-wrap input { min-width: 0; flex: 1; border: 0; background: transparent; padding: 12px 0; font-size: 12px; }
.gallery-search-wrap:focus-within { outline: 2px solid var(--gallery-focus); outline-offset: 3px; }
.gallery-search-wrap input:focus-visible { outline: none; }
.gallery-search-wrap input::placeholder { color: #8a817a; }
.gallery-search-wrap kbd { color: var(--gallery-muted); padding: 0 6px; border: 1px solid var(--gallery-line); border-radius: 4px; font: 11px/20px var(--gallery-sans); }
.gallery-results-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 67px; }
#gallery-count { margin: 0; font-size: 12px; color: var(--gallery-muted); }
.gallery-reset { padding: 10px 0 10px 10px; border: 0; color: var(--gallery-brand); background: transparent; font-size: 12px; min-height: 44px; }
.gallery-reset span { margin-left: 8px; font-size: 17px; }
.gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 27px 22px; }
.gallery-card { min-width: 0; position: relative; }
.gallery-card__open { display: block; text-decoration: none; border-radius: var(--gallery-radius); }
.gallery-card__preview { position: relative; height: 290px; display: flex; align-items: center; justify-content: center; padding: 28px 24px; overflow: hidden; background: var(--gallery-paper); border: 1px solid #e3ddd5; border-radius: var(--gallery-radius); transition: background 150ms, border-color 150ms; }
.gallery-card__open:hover .gallery-card__preview { background: #e3ded6; border-color: #cbbdb0; }
.gallery-card__preview img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; box-shadow: 0 3px 12px #3c302119; opacity: 0; transition: opacity 160ms; }
.gallery-card__preview.is-loaded img { opacity: 1; }
.gallery-card__placeholder { position: absolute; inset: 30px; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; color: #786d61; text-align: center; font-size: 12px; }
.gallery-card__placeholder svg { color: #a89989; }
.gallery-card__preview.is-loaded .gallery-card__placeholder { display: none; }
.gallery-card__open:hover .gallery-card__arrow { color: white; background: var(--gallery-brand); border-color: var(--gallery-brand); }
.gallery-card__info { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-top: 14px; }
.gallery-card__info > div { min-width: 0; }
.gallery-card h2 { margin: 0 0 4px; font: 600 17px/1.25 var(--gallery-display); overflow-wrap: anywhere; }
.gallery-card__format { font-size: 11px; color: var(--gallery-muted); margin: 0; line-height: 1.5; }
.gallery-card__arrow { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border: 1px solid #dcd3c9; border-radius: 50%; font-size: 17px; transition: background 150ms, color 150ms; }
.gallery-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; font-size: 10px; color: var(--gallery-muted); }
.gallery-card__theme { color: #8c3b43; }
.gallery-card__retry { border: 0; background: transparent; color: var(--gallery-brand); padding: 8px 0; font-size: 11px; text-align: left; min-height: 36px; }
.gallery-card__actions { display: flex; gap: 8px; justify-content: space-between; margin-top: 13px; border-top: 1px solid var(--gallery-line); padding-top: 7px; }
.gallery-card__actions button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 8px; font-size: 12px; }
.gallery-card__actions button:hover { background: var(--gallery-surface); border-color: var(--gallery-line); }
.gallery-card__actions .gallery-card__delete { color: var(--gallery-brand); }
.gallery-scopes { display: flex; gap: 8px; padding-bottom: 20px; }
.gallery-scopes button { display: flex; gap: 9px; align-items: center; min-height: 44px; border: 1px solid transparent; background: transparent; border-radius: var(--gallery-radius); padding: 9px 14px; color: var(--gallery-muted); }
.gallery-scopes button[aria-pressed="true"] { color: var(--gallery-brand); border-color: var(--gallery-line); background: var(--gallery-surface); }
.gallery-scopes span { font-size: 11px; background: var(--gallery-paper); color: var(--gallery-ink); padding: 1px 7px; border-radius: 12px; }
.gallery-dialog { width: min(490px, calc(100vw - 36px)); max-height: calc(100dvh - 40px); overflow: auto; padding: 28px; border: 1px solid var(--gallery-line); border-radius: 12px; background: var(--gallery-surface); color: var(--gallery-ink); }
.gallery-dialog::backdrop { background: #28232666; }
.gallery-dialog h2 { font: 600 26px/1.15 var(--gallery-display); margin: 0 0 14px; overflow-wrap: anywhere; }
.gallery-dialog p { color: var(--gallery-muted); }
.gallery-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.gallery-dialog .gallery-dialog__error { color: var(--gallery-brand); }
.gallery-feedback { position: fixed; z-index: 20; bottom: 20px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 36px); padding: 14px 20px; background: var(--gallery-surface); border: 1px solid var(--gallery-line); border-left: 3px solid var(--gallery-brand); border-radius: var(--gallery-radius); box-shadow: 0 6px 24px #3c302119; font-size: 13px; }
.gallery-feedback.is-error { color: var(--gallery-brand); }
.gallery-feedback { display: flex; align-items: center; gap: 12px; }
.gallery-feedback button { flex-shrink: 0; width: 44px; min-height: 44px; border: 0; background: transparent; font-size: 22px; color: var(--gallery-muted); }
.gallery-skeleton { min-width: 0; }
.gallery-skeleton > div { height: 290px; background: var(--gallery-paper); border-radius: var(--gallery-radius); }
.gallery-skeleton > span { display: block; height: 12px; width: 65%; background: var(--gallery-paper); margin-top: 16px; border-radius: 3px; }
.gallery-skeleton > span:last-child { height: 8px; width: 43%; margin-top: 10px; }
.gallery-state { padding: 65px 20px 80px; text-align: center; color: var(--gallery-muted); border: 1px dashed #d2c7bb; border-radius: var(--gallery-radius); }
.gallery-state h2 { font: 600 25px/1.2 var(--gallery-display); color: var(--gallery-ink); margin: 18px 0 7px; }
.gallery-state p { margin: 0 0 23px; }
.gallery-state-icon { display: inline-flex; width: 38px; height: 38px; border: 1px solid #b99595; border-radius: 50%; align-items: center; justify-content: center; color: var(--gallery-brand); font-size: 22px; }
@media (min-width: 1750px) { .gallery-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .gallery-card__preview, .gallery-skeleton > div { height: 265px; } }
@media (max-width: 1150px) { .gallery-header { gap: 26px; } .gallery-header nav { gap: 15px; } .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gallery-total { display: none; } .gallery-filters { grid-template-columns: minmax(240px, 1.8fr) minmax(140px, 1fr) minmax(120px, .8fr); gap: 12px; } .gallery-sort-field { grid-column: 3; grid-row: 2; } .gallery-sort-field label { display: none; } }
@media (max-width: 820px) { .gallery-header { padding: 16px 22px; gap: 20px; flex-wrap: wrap; } .gallery-nav-secondary { display: none; } .gallery-header nav { margin-left: auto; } .gallery-header > .gallery-button { margin-left: 0; } .gallery-main { width: calc(100% - 44px); } .gallery-intro { padding-top: 34px; } .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gallery-search-field { grid-column: 1 / -1; } .gallery-sort-field { grid-row: auto; grid-column: auto; } .gallery-sort-field label { display: block; } .gallery-card__preview { height: 285px; padding: 22px 18px; } }
@media (max-width: 520px) { .gallery-header { gap: 14px; padding: 17px 18px; } .gallery-brand { font-size: 27px; gap: 12px; } .gallery-brand span { padding-left: 12px; font-size: 9px; } .gallery-header nav { display: none; } .gallery-header > .gallery-button { margin-left: auto; font-size: 0; padding: 10px; width: 44px; } .gallery-header > .gallery-button > span { font-size: 25px; } .gallery-main { width: calc(100% - 36px); } h1 { font-size: 37px; } .gallery-description { font-size: 13px; max-width: 290px; } .gallery-intro { padding: 30px 0 25px; } .gallery-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 20px 0; } .gallery-sort-field { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; } .gallery-sort-field label { flex-shrink: 0; margin: 0; } .gallery-sort-field select { flex: 1; min-width: 0; } .gallery-search-wrap kbd { display: none; } .gallery-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } .gallery-card__preview, .gallery-skeleton > div { height: 330px; padding: 24px; } .gallery-results-bar { min-height: 66px; } .gallery-reset { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
.gallery-selection{position:sticky;top:10px;z-index:15;display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;padding:14px 18px;margin:0 0 26px;border:1px solid var(--gallery-line);border-radius:10px;background:var(--gallery-surface);box-shadow:0 5px 18px #2823260d}
.gallery-selection[hidden]{display:none}
.gallery-select-all{display:flex;align-items:center;gap:9px;min-height:40px;font-size:13px;cursor:pointer}
.gallery-select-all>span{font-size:11px;color:var(--gallery-muted)}
.gallery-selection input,.gallery-card__select input{appearance:auto;width:19px;height:19px;accent-color:var(--gallery-brand);cursor:pointer;flex-shrink:0}
.gallery-selection>p{font-size:13px;margin:0;color:var(--gallery-brand);font-weight:600}
.gallery-selection__actions{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.gallery-selection__actions .gallery-button{font-size:12px;padding:9px 13px;min-height:42px}
.gallery-card{position:relative}
.gallery-card.is-selected{outline:2px solid var(--gallery-brand);outline-offset:4px;border-radius:6px}
.gallery-card__select{position:absolute;top:12px;left:12px;z-index:2;display:flex;gap:7px;align-items:center;background:var(--gallery-surface);border:1px solid var(--gallery-line);border-radius:7px;min-height:40px;padding:8px;cursor:pointer;box-shadow:0 2px 6px #2823260b}
.gallery-card__select span{font-size:10px;font-weight:600}
.gallery-card__status{position:absolute;right:12px;top:17px;z-index:2;font-size:10px;font-weight:600;background:var(--gallery-surface);color:var(--gallery-muted);padding:5px 9px;border-radius:6px;pointer-events:none}
.gallery-card__status.is-published{background:#ecf2ea;color:#3c6142}
.gallery-selection input:focus-visible,.gallery-card__select input:focus-visible{outline:3px solid var(--gallery-brand);outline-offset:3px}
.gallery-dialog{margin:auto}
@media(max-width:600px){.gallery-selection{top:6px;padding:10px 12px;gap:5px 13px}.gallery-selection__actions{width:100%;margin-left:0}.gallery-selection__actions .gallery-button{flex:1;white-space:nowrap;font-size:11px}.gallery-select-all>span{display:none}.gallery-card__select{top:8px;left:8px}.gallery-card__status{right:8px}.gallery-card__select span{display:none}}
.gallery-feedback{pointer-events:none}.gallery-feedback button{pointer-events:auto}