:root{
  --bg:#0f1115; --panel:#171a21; --ink:#e6e6e6; --dim:#9aa3b2;
  --line:#262b36; --accent:#c9a24b; --link:#7fb0ff; --max:48rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.65 Georgia,"Iowan Old Style",serif;-webkit-text-size-adjust:100%}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
code,pre,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
header.site{position:sticky;top:0;z-index:20;background:rgba(15,17,21,.95);
  border-bottom:1px solid var(--line);backdrop-filter:blur(6px)}
header.site nav{max-width:72rem;margin:0 auto;display:flex;gap:1.1rem;
  flex-wrap:wrap;align-items:baseline;padding:.7rem 1rem;
  font-family:system-ui,sans-serif;font-size:.9rem}
header.site .brand{font-weight:700;color:var(--accent);
  letter-spacing:.02em;margin-right:.4rem}
header.site a{color:var(--dim)}
header.site a:hover,header.site a.active{color:var(--ink);text-decoration:none}
main{max-width:72rem;margin:0 auto;padding:2rem 1rem 5rem}
.prose{max-width:var(--max)}
.prose h1{font-size:2rem;line-height:1.2;margin:.2em 0 .1em}
.prose h2{font-size:1.4rem;margin:2em 0 .4em;color:var(--accent)}
.prose h3{font-size:1.1rem;margin:1.6em 0 .3em}
.prose p,.prose li{color:#dcdfe6}
.prose blockquote{border-left:3px solid var(--accent);margin:1.2em 0;
  padding:.2em 1em;color:var(--dim);font-style:italic}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.5em 0}
.lede{color:var(--dim);font-size:1.05rem;font-style:italic}
.kicker{font-family:system-ui,sans-serif;font-size:.75rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.note{background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--accent);padding:.8em 1em;border-radius:6px;
  font-size:.92rem;color:var(--dim);margin:1.4em 0}
.cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  list-style:none;padding:0;margin:2rem 0}
.cards a{display:block;background:var(--panel);border:1px solid var(--line);
  border-radius:8px;padding:1rem 1.1rem;color:var(--ink)}
.cards a:hover{border-color:var(--accent);text-decoration:none}
.cards h3{margin:.1em 0 .3em;font-size:1.05rem}
.cards p{margin:0;color:var(--dim);font-size:.9rem;font-family:system-ui,sans-serif}
/* gallery */
.toolbar{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;
  font-family:system-ui,sans-serif;font-size:.85rem;margin:0 0 1.2rem}
.toolbar button{background:var(--panel);color:var(--dim);
  border:1px solid var(--line);border-radius:999px;padding:.35rem .9rem;
  cursor:pointer;font:inherit}
.toolbar button.active{color:#11141a;background:var(--accent);
  border-color:var(--accent)}
.toolbar input{background:var(--panel);border:1px solid var(--line);
  color:var(--ink);border-radius:6px;padding:.4rem .6rem;font:inherit;
  min-width:14rem}
.grid{display:grid;gap:.6rem;
  grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr))}
.thumb{position:relative;border:1px solid var(--line);border-radius:6px;
  overflow:hidden;background:#000;cursor:pointer;aspect-ratio:3/4}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .3s}
.thumb img.loaded{opacity:1}
.thumb .tag{position:absolute;left:4px;top:4px;font:600 .65rem system-ui;
  background:rgba(0,0,0,.65);color:var(--accent);padding:1px 6px;
  border-radius:4px}
.thumb:hover{border-color:var(--accent)}
.count{color:var(--dim);font:.85rem system-ui;margin-left:auto}
/* modal */
.modal{position:fixed;inset:0;background:rgba(5,6,9,.94);z-index:50;
  display:none;padding:1.5rem;overflow:auto}
.modal.open{display:block}
.modal .inner{max-width:78rem;margin:0 auto;display:grid;gap:1.5rem;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.modal img{width:100%;border:1px solid var(--line);border-radius:6px}
.modal h2{margin:.1em 0;font-size:1.25rem}
.modal .meta{color:var(--dim);font:.8rem system-ui;margin-bottom:1rem}
.modal pre{white-space:pre-wrap;word-break:break-word;background:var(--panel);
  border:1px solid var(--line);border-radius:6px;padding:1rem;
  font-size:.82rem;line-height:1.5;max-height:42vh;overflow:auto}
.modal .x{position:fixed;top:1rem;right:1.2rem;font-size:1.6rem;
  color:var(--dim);cursor:pointer;background:none;border:0}
.modal .nav{position:fixed;top:50%;font-size:2rem;color:var(--dim);
  background:none;border:0;cursor:pointer;padding:1rem}
.modal .nav.prev{left:.3rem}.modal .nav.next{right:.3rem}
.tabs{display:flex;gap:.4rem;margin:.6rem 0 .3rem;font:.78rem system-ui}
.tabs button{background:none;border:1px solid var(--line);color:var(--dim);
  border-radius:4px;padding:.2rem .6rem;cursor:pointer}
.tabs button.active{color:var(--accent);border-color:var(--accent)}
footer.site{border-top:1px solid var(--line);color:var(--dim);
  font:.8rem system-ui;text-align:center;padding:2rem 1rem;margin-top:3rem}
@media(max-width:760px){.modal .inner{grid-template-columns:1fr}}