@font-face { font-family: Shantell; src: url("fonts/ShantellSans-Variable.woff2") format("woff2"); }
:root { --paper:#f4ecd8; --panel:#fffaf0; --ink:#282621; --line:#c9b995; --blue:#426d91; --red:#9e4b39; --soft:#eee2c8; font-family:Shantell, system-ui, sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; padding-bottom:6.5rem; background-image:linear-gradient(#0000 23px, #c9b99533 24px),linear-gradient(90deg,#0000 23px,#c9b99533 24px); background-size:24px 24px; }
.topbar, main { max-width:1600px; margin:auto; padding-left:clamp(1rem,3vw,3rem); padding-right:clamp(1rem,3vw,3rem); }.topbar { display:flex; justify-content:space-between; gap:1rem; align-items:start; padding-top:1.6rem; padding-bottom:1rem; }.eyebrow { margin:0; font-size:.78rem; color:var(--red); font-weight:700; }.topbar h1 { margin:.25rem 0; font-size:clamp(1.6rem,3vw,2.35rem); }.summary,.hint,.meta { color:#6d6252; }.back-link { color:var(--blue); font-weight:700; }
.toolbar { display:flex; flex-wrap:wrap; align-items:end; gap:.65rem; padding:1rem; border:2px solid var(--ink); background:var(--panel); box-shadow:4px 4px 0 #8c806b33; }.toolbar label { display:grid; gap:.2rem; font-size:.82rem; font-weight:700; }.toolbar input,.toolbar select,button { font:inherit; border:1.5px solid var(--ink); border-radius:3px; padding:.5rem .65rem; background:#fffdf7; color:var(--ink); }.toolbar .search { flex:1 1 260px; }.toolbar .check { display:flex; align-items:center; padding:.5rem 0; }.toolbar .check input { accent-color:var(--red); }.toolbar button,.card button,.selection-bar button { cursor:pointer; font-weight:700; }.primary { background:var(--blue); color:white; }.hint { margin:.8rem 0; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1.1rem; }.card { position:relative; display:flex; flex-direction:column; gap:.55rem; padding:.7rem; background:var(--panel); border:2px solid var(--ink); box-shadow:3px 4px 0 #8c806b33; }.card.selected { border-color:var(--red); background:#fff1df; box-shadow:4px 5px 0 #9e4b3940; }.card img { width:100%; height:175px; object-fit:contain; background:#e9dfc9; cursor:zoom-in; }.card h2 { min-height:2.7em; font-size:1rem; line-height:1.3; margin:0; }.card p { margin:0; font-size:.8rem; }.card button { align-self:start; color:var(--blue); }.card-check { position:absolute; z-index:2; top:.95rem; right:.95rem; width:1.35rem; height:1.35rem; accent-color:var(--red); cursor:pointer; }.pill { display:inline-block; width:max-content; margin:0; border:1px dashed var(--blue); color:var(--blue); padding:.15rem .4rem; font-weight:700; font-size:.77rem; }.reason { color:var(--red); line-height:1.3; }.empty { text-align:center; padding:3rem; }.hidden { display:none; }
.selection-bar { position:fixed; z-index:5; bottom:0; inset-inline:0; display:flex; gap:.65rem; align-items:center; flex-wrap:wrap; padding:.75rem max(1rem,calc((100vw - 1600px)/2 + 3vw)); background:#2e2b25; color:#fff9ec; box-shadow:0 -3px 12px #0004; }.selection-bar span { flex:1; color:#e5d8bf; font-size:.82rem; }.selection-bar button { border-color:#e5d8bf; }.selection-bar .danger { background:var(--red); color:white; }
dialog { width:min(1160px,94vw); max-height:92vh; padding:1.4rem; border:3px solid var(--ink); background:var(--panel); color:var(--ink); }.close { float:right; font-size:1.8rem; border:0; background:transparent; cursor:pointer; }.viewer-content { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(240px,.75fr); gap:1.2rem; align-items:start; }.viewer-content img { width:100%; max-height:75vh; object-fit:contain; background:#e9dfc9; }.viewer-select { display:flex; gap:.5rem; align-items:center; margin-top:1rem; font-weight:700; }.viewer-select input { width:1.4rem; height:1.4rem; accent-color:var(--red); }
@media (max-width:700px) { .topbar { display:block; }.back-link { display:inline-block; margin-top:.5rem; }.viewer-content { grid-template-columns:1fr; }.selection-bar span { display:none; }.selection-bar { justify-content:center; }.grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }.card img { height:135px; } }