:root { color-scheme: dark; --ink:#f7f2e8; --muted:#c7c1b5; --paper:#191711; --panel:#242017; --accent:#d7a84a; --line:#4a4234; }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.55 Georgia, serif; color:var(--ink); background:radial-gradient(circle at top, #3b2c18, var(--paper) 42rem); }
.masthead, main, footer { width:min(1600px, calc(100% - 3rem)); margin:auto; }
.masthead { padding:4.5rem 0 2rem; }
.eyebrow { margin:0; color:var(--accent); text-transform:uppercase; letter-spacing:.14em; font:700 .75rem/1 system-ui,sans-serif; }
h1 { font-size:clamp(2.7rem,8vw,5.4rem); line-height:.95; margin:.35rem 0 .85rem; }
.masthead p:last-child { max-width:45rem; color:var(--muted); }
.controls { position:sticky; top:0; z-index:1; padding:1rem 0; background:linear-gradient(var(--paper) 78%, transparent); }
input { width:100%; padding:.85rem 1rem; border:1px solid var(--line); border-radius:.35rem; background:#120f0b; color:var(--ink); font:inherit; }
.filters { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.7rem; }
.filter, .source-link { border:1px solid var(--line); border-radius:999px; padding:.35rem .75rem; background:transparent; color:var(--muted); cursor:pointer; font:inherit; text-decoration:none; }
.filter.active, .filter:hover { color:#1b150b; background:var(--accent); border-color:var(--accent); }
.gallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:1rem; padding:1rem 0 4rem; }
.card { padding:0; overflow:hidden; border:1px solid var(--line); border-radius:.5rem; background:var(--panel); color:inherit; text-align:left; cursor:pointer; text-decoration:none; transition:transform .15s ease,border-color .15s ease; }
.card:hover,.card:focus-visible { transform:translateY(-2px); border-color:var(--accent); }
.card img { width:100%; aspect-ratio:3/4; object-fit:cover; display:block; background:#110e0a; }
.card div { padding:1rem; }.card h2 { margin:0; font-size:1.25rem; }.card p { margin:.25rem 0 0; color:var(--muted); font-size:.9rem; }
.tag { color:var(--accent) !important; font:700 .76rem/1.25 system-ui,sans-serif; text-transform:uppercase; letter-spacing:.08em; }
dialog { width:min(900px, calc(100% - 1rem)); max-height:90vh; padding:0; border:1px solid var(--line); border-radius:.6rem; color:var(--ink); background:var(--panel); }
dialog::backdrop { background:#000b; }.close { position:fixed; right:calc(5vw + .5rem); top:calc(5vh + .5rem); width:2.5rem; height:2.5rem; border:0; border-radius:50%; background:var(--accent); color:#1b150b; font-size:2rem; cursor:pointer; }
#folio-content { padding:2rem; }.folio-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,35%); gap:2rem; }.folio-head img { width:100%; max-height:450px; object-fit:cover; border-radius:.35rem; }
#folio-content h2 { font-size:2.4rem; margin:0; } #folio-content h3 { color:var(--accent); margin-top:2rem; } table { width:100%; border-collapse:collapse; } th,td { padding:.55rem; border-bottom:1px solid var(--line); text-align:left; } th { color:var(--muted); font:700 .75rem system-ui,sans-serif; text-transform:uppercase; }
.links { display:flex; flex-wrap:wrap; gap:.5rem; }.empty { padding:3rem 0; color:var(--muted); } footer { padding:1.5rem 0 2rem; color:var(--muted); border-top:1px solid var(--line); font-size:.9rem; }
@media(max-width:640px) { .folio-head { grid-template-columns:1fr; } #folio-content { padding:1.25rem; } }