:root { color-scheme:light; --navy:#173f73; --deep:#0d284a; --gold:#e0bd7b; --cream:#f7f3eb; --paper:#fffdf8; --ink:#182f47; --muted:#5d6c79; --line:#dce3e9; --danger:#a62935; }
* { box-sizing:border-box; } [hidden] { display:none!important; }
body { margin:0; color:var(--ink); background:var(--cream); font:16px/1.6 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
body:has(dialog[open]) { overflow:hidden; }
h1,h2,h3,p { margin:0; } h1,h2 { font-family:Georgia,'Times New Roman',serif; font-weight:400; line-height:1.15; }
a { color:inherit; text-underline-offset:4px; }
button,input,select,textarea { font:inherit; } button { cursor:pointer; touch-action:manipulation; }
button:disabled { cursor:default; opacity:.55; }
:focus-visible { outline:3px solid #3478b7; outline-offset:4px; } button:focus-visible { position:relative; z-index:1; }
input,textarea,select { max-width:100%; border:1px solid #a9b8c7; border-radius:8px; color:var(--ink); background:white; padding:10px 12px; }
textarea { resize:vertical; min-height:90px; } input[type="checkbox"] { width:18px; height:18px; accent-color:var(--navy); flex:none; }
input[type="file"] { width:100%; font-size:14px; padding:10px; }
input[type="file"]::file-selector-button { border:0; border-radius:5px; background:#eaf0f6; color:var(--navy); padding:9px 12px; margin-right:12px; font:inherit; cursor:pointer; }
.container { width:min(1100px,calc(100% - 48px)); margin-inline:auto; }
.skip-link { position:absolute; top:12px; left:12px; transform:translateY(-150%); z-index:10; background:white; padding:12px; border-radius:8px; }
.skip-link:focus { transform:none; }
.site-header { background:var(--paper); border-bottom:1px solid var(--line); }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:24px; }
.brand { display:flex; gap:12px; align-items:center; text-decoration:none; font:21px/1.1 Georgia,serif; }
.brand-mark { display:grid; place-items:center; flex:none; width:43px; height:43px; border:1px solid #b8914d; border-radius:50%; font-size:14px; color:var(--navy); }
.brand-sub { display:block; margin-top:7px; font:10px/1.2 Arial,sans-serif; letter-spacing:.2em; color:var(--muted); }
nav { display:flex; gap:24px; align-items:center; flex-wrap:wrap; font-size:13px; }
nav a { min-height:44px; display:flex; align-items:center; text-decoration:none; } nav a:hover { text-decoration:underline; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:11px 18px; border:1px solid var(--line); border-radius:9px; background:white; color:var(--ink); font-size:14px; font-weight:600; line-height:1.4; text-decoration:none; }
.button:hover { background:#edf2f7; } .button.small { min-height:44px; padding:9px 14px; font-size:13px; }
.button.primary { background:var(--navy); border-color:var(--navy); color:white; } .button.primary:hover { background:var(--deep); }
.button.gold { background:var(--gold); border-color:var(--gold); color:var(--deep); } .button.gold:hover { background:#efd4a3; }
.button.danger { background:var(--danger); border-color:var(--danger); color:white; } .button.danger:hover { background:#82202a; }
.text-button { background:transparent; color:var(--navy); border:0; padding:8px 0; min-height:44px; font-size:13px; text-decoration:underline; text-underline-offset:4px; }
.hero { background:linear-gradient(115deg,#0d284a,#173f73 70%,#285784); padding:58px 0 50px; color:white; }
.eyebrow { font:600 11px/1.5 Inter,Arial,sans-serif; letter-spacing:.15em; color:#75571e; margin-bottom:12px; }
.hero .eyebrow { color:var(--gold); } .hero h1 { font-size:clamp(38px,5.5vw,60px); letter-spacing:-.025em; }
.hero-copy { margin-top:19px; max-width:570px; color:#e5ecf4; font-size:17px; }
.hero-date { margin-top:26px; font-size:13px; color:#cfdbeb; } .hero-date span { padding:0 8px; }
.gallery-main { padding-top:32px; padding-bottom:64px; min-height:380px; }
.manager-bar { display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:20px 24px; border:1px solid var(--line); border-left:4px solid #b8914d; border-radius:12px; background:white; margin-bottom:28px; }
.manager-bar h2 { font:650 16px/1.5 Inter,Arial,sans-serif; } .manager-bar p { color:var(--muted); font-size:13px; margin-top:3px; }
.actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 20px; }
.section-heading h2 { font-size:29px; } .section-heading p { font-size:13px; margin-top:7px; }
.muted,.fine-print { color:var(--muted); } .fine-print { font-size:12px; margin-top:16px; }
.filter-row { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.filters { display:flex; gap:7px; flex-wrap:wrap; }
.filter { color:var(--ink); background:transparent; border:1px solid var(--line); border-radius:99px; padding:9px 16px; font-size:13px; min-height:44px; }
.filter:hover { background:white; } .filter[aria-pressed="true"] { color:white; background:var(--navy); border-color:var(--navy); }
.visibility { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); } .visibility select { padding:9px; }
.gallery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; align-items:start; }
.gallery-card { border:1px solid var(--line); background:white; border-radius:15px; overflow:hidden; min-width:0; box-shadow:0 7px 24px #163b5b08; }
.media-button { position:relative; border:0; padding:0; display:block; width:100%; aspect-ratio:4/3; overflow:hidden; background:#e7edf2; color:var(--navy); }
.media-button img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .2s ease; } .media-button:hover img { transform:scale(1.025); }
.media-placeholder { display:grid; place-items:center; height:100%; padding:30px; font-size:14px; }
.play-icon { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:52px; height:52px; border:1px solid #ffffff99; border-radius:50%; background:#0d284ad6; color:white; font-size:20px; padding-left:3px; }
.media-label { position:absolute; left:12px; bottom:12px; padding:3px 9px; font-size:11px; border-radius:99px; background:#102d4de8; color:white; }
.hidden-label { position:absolute; right:12px; top:12px; padding:4px 10px; font-size:11px; border-radius:99px; background:#ffedca; color:#5e481d; }
.card-copy { padding:18px; } .card-copy h3 { font-size:16px; line-height:1.4; overflow-wrap:anywhere; }
.card-copy p { margin-top:8px; color:var(--muted); font-size:13px; white-space:pre-wrap; overflow-wrap:anywhere; } .card-copy .card-date { margin-top:12px; font-size:11px; }
.card-actions { display:flex; flex-wrap:wrap; gap:7px; padding:0 16px 16px; } .card-actions .button { flex:1; padding:8px 10px; font-size:12px; } .card-actions .delete-button { color:var(--danger); }
.empty-state { text-align:center; padding:48px 24px; background:var(--paper); border:1px dashed #c5d0dc; border-radius:15px; }
.empty-icon { font-size:32px; color:#b8914d; display:block; margin-bottom:12px; } .empty-state h3 { font:400 25px/1.25 Georgia,serif; }
.empty-state p { margin:12px auto 0; max-width:480px; color:var(--muted); font-size:14px; } .empty-state .button { margin-top:20px; }
.notice { display:block; border:1px solid #bfd0e0; border-radius:10px; background:#edf4fb; padding:14px 18px; margin-bottom:22px; font-size:14px; }
.notice.error { background:#fff0ef; border-color:#e4b8b7; color:#84232d; }
.preview-bar,.cleanup-note { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; } .cleanup-note { background:#fff5e2; border-color:#dfc58f; }
.load-more { text-align:center; margin-top:28px; }
.footer { background:var(--paper); border-top:1px solid var(--line); padding-block:30px; color:var(--muted); font-size:13px; }
.footer-inner { display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; } .footer strong { color:var(--navy); font-weight:600; }
.footer a { align-self:center; min-height:44px; display:flex; align-items:center; color:var(--navy); }
.dialog { border:1px solid var(--line); border-radius:18px; padding:28px; width:calc(100% - 32px); max-width:520px; max-height:calc(100dvh - 32px); overflow-y:auto; color:var(--ink); background:var(--paper); box-shadow:0 28px 100px #0005; }
.dialog::backdrop { background:#081e37b8; backdrop-filter:blur(3px); } .dialog.wide { max-width:730px; }
.dialog-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; } .dialog-heading h2 { font-size:29px; } .dialog-heading .eyebrow { margin-bottom:8px; }
.dialog > p { font-size:14px; margin-bottom:16px; }
.icon-button { width:44px; height:44px; margin:-9px -9px 0 0; border:0; border-radius:50%; background:transparent; color:var(--ink); font:28px/1 Arial,sans-serif; flex:none; } .icon-button:hover { background:#eaf0f5; }
.field { display:flex; flex-direction:column; gap:7px; font-size:14px; font-weight:600; margin-top:18px; } .field input,.field textarea { font-weight:400; width:100%; } .field .muted { font-size:12px; font-weight:400; }
.check { display:flex; align-items:center; gap:9px; font-size:13px; margin-top:18px; }
.dialog-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:24px; flex-wrap:wrap; }
.form-message { font-size:13px; margin-top:16px; overflow-wrap:anywhere; } .form-message.error { color:#a0202c; background:#fff0ee; padding:12px; border-radius:7px; }
.dropzone { border:1px dashed #94acc3; border-radius:12px; padding:22px; background:#f0f4f8; } .dropzone .field { margin:0 0 16px; } .dropzone.drag-over { outline:3px solid var(--navy); background:#e1edf8; }
.upload-queue { display:grid; gap:18px; margin-top:20px; } .queue-item { border:1px solid var(--line); border-radius:10px; padding:16px; background:white; }
.queue-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; } .queue-summary { display:flex; align-items:center; gap:14px; min-width:0; }
.queue-summary img,.queue-summary video { width:80px; height:65px; object-fit:cover; border-radius:6px; flex:none; background:#e7edf2; }
.queue-summary p { font-size:12px; color:var(--muted); overflow-wrap:anywhere; } .queue-summary strong { display:block; font-size:13px; color:var(--ink); }
.queue-item .field { margin-top:12px; font-size:12px; } .queue-item textarea { min-height:65px; }
.queue-state { color:var(--navy); font-size:13px; margin-top:10px; } .queue-state.error { color:var(--danger); } .queue-item.complete { background:#f0f6f1; border-color:#b4cdbb; }
.replace-preview { margin-top:14px; } .replace-preview img,.replace-preview video { max-height:180px; max-width:100%; display:block; border-radius:7px; }
progress { width:100%; height:10px; margin-top:16px; accent-color:var(--navy); }
.viewer { max-width:1000px; } .viewer-media { display:flex; justify-content:center; align-items:center; min-height:200px; background:#0c2037; border-radius:10px; overflow:hidden; }
.viewer-loading { color:white; padding:30px; }
.viewer-media img,.viewer-media video { display:block; max-width:100%; max-height:70dvh; object-fit:contain; } .viewer > p { margin-top:16px; white-space:pre-wrap; overflow-wrap:anywhere; } .viewer .dialog-heading h2 { font-size:23px; overflow-wrap:anywhere; }
@media(max-width:850px) { .gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .topbar { gap:16px; } nav { gap:16px; } nav a:first-child { display:none; } }
@media(max-width:560px) {
  .container { width:calc(100% - 32px); } .topbar { padding-block:18px; align-items:flex-start; }
  .brand { font-size:18px; gap:9px; } .brand-mark { width:35px; height:35px; font-size:12px; } .brand-sub { font-size:8px; }
  nav { gap:5px; justify-content:flex-end; } nav a { display:none; } nav .button { font-size:12px; padding:8px 10px; }
  .hero { padding:38px 0; } .hero-copy { font-size:15px; } .hero-date { font-size:12px; } .hero .eyebrow { font-size:9px; letter-spacing:.1em; }
  .gallery-main { padding-top:24px; } .gallery-grid { grid-template-columns:1fr; gap:20px; }
  .manager-bar { padding:18px; } .manager-bar .actions { width:100%; } .manager-bar .actions .button { flex:1; }
  .section-heading h2 { font-size:26px; } .section-heading { align-items:flex-start; } .section-heading .text-button { font-size:12px; white-space:nowrap; }
  .dialog { padding:22px; } .dialog-heading h2 { font-size:25px; } .dropzone { padding:16px; } .dialog-actions .button { flex:1; }
  .queue-summary img,.queue-summary video { width:60px; height:55px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; scroll-behavior:auto!important; } }