:root{
  --bg:#faf8f4;
  --ink:#1d1a16;
  --muted:#6e655d;
  --line:#e6dfd6;
  --accent:#3b2f25;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Georgia, "Times New Roman", serif;line-height:1.5}

.site-header{
  border-bottom:1px solid var(--line);
  padding:16px 20px;
  position:sticky;top:0;background:rgba(250,248,244,.95);backdrop-filter:saturate(1.1) blur(4px);z-index:10
}
.brand{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.logo{width:42px;height:42px;border-radius:10px;background:#d9c9b4;display:grid;place-items:center;font-weight:bold;color:#2a2119}
.titles h1{margin:0;font-size:22px;letter-spacing:.2px}
.titles .tagline{margin:2px 0 0;color:var(--muted);font-size:14px}
.nav{margin-top:8px;display:flex;gap:14px;flex-wrap:wrap}
.nav a{color:var(--accent);text-decoration:none;border-bottom:1px dotted transparent}
.nav a:hover{border-bottom-color:var(--accent)}

.catalog{max-width:980px;margin:0 auto;padding:24px 16px}
.work{padding:32px 0;border-bottom:1px solid var(--line)}
.work:last-of-type{border-bottom:none}
.work-title{font-size:28px;margin:0 0 4px}
.year{font-weight:normal;color:var(--muted);font-size:.9em;padding-left:6px}
.work-meta{margin:0 0 14px;color:var(--muted)}
.work-images{display:grid;gap:10px}
.work-images img{width:100%;height:auto;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.03)}

.work-caption{margin:10px 0 14px}

details{border:1px solid var(--line);border-radius:10px;background:#fff;margin:10px 0;box-shadow:0 2px 10px rgba(0,0,0,.02)}
details>summary{cursor:pointer;list-style:none;padding:12px 14px;font-weight:600}
details[open]>summary{border-bottom:1px solid var(--line);background:#fcfbf9;border-top-left-radius:10px;border-top-right-radius:10px}
.details-body{padding:12px 14px 16px}

.btn{display:inline-block;padding:8px 12px;border:1px solid var(--accent);border-radius:8px;text-decoration:none;color:var(--accent)}
.btn:hover{background:var(--accent);color:#fff}

.permalink{margin-top:8px}
.permalink a{color:var(--muted);font-size:.9em;text-decoration:none}
.permalink a:hover{text-decoration:underline}

.back-to-top{padding:24px 0;text-align:center}
.back-to-top a{text-decoration:none;color:var(--accent)}

.site-footer{border-top:1px solid var(--line);padding:18px 16px;text-align:center;color:var(--muted);font-size:14px}

/* Small screens */
@media (max-width:640px){
  .work-title{font-size:24px}
}