:root, [data-theme="light"] {
  --fg:#111; --bg:#fff; --muted:#777; --rule:#ddd; --link:#111;
  --code-bg:#f3f3f3; --pre-bg:#f6f6f6; --thumb-bg:#f3f3f3; --blockquote:#333; --mark-bg:#c00; --mark-fg:#fff;
  color-scheme:light;
}
[data-theme="dark"] {
  --fg:#e8e8e8; --bg:#111; --muted:#888; --rule:#333; --link:#e8e8e8;
  --code-bg:#1e1e1e; --pre-bg:#1a1a1a; --thumb-bg:#1a1a1a; --blockquote:#ccc; --mark-bg:#c00; --mark-fg:#fff;
  color-scheme:dark;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--fg);
  font:13px/1.6 'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
  letter-spacing:.01em;
}
.wrap { max-width:760px; margin:0 auto; padding:28px 20px 80px; }
a { color:var(--link); text-decoration:none; border-bottom:1px solid var(--rule); }
a:hover { border-bottom-color:var(--fg); }
header.site { margin-bottom:26px; }
header.site .brand {
  display:block; font-size:15px; font-weight:700; letter-spacing:.04em;
  text-transform:lowercase; border:0; margin-bottom:10px;
}
nav.main { display:flex; flex-wrap:wrap; gap:14px; align-items:baseline; }
nav.main a { text-transform:lowercase; border:0; color:var(--muted); }
nav.main a:hover, nav.main a.active { color:var(--fg); }
nav.main .langs { margin-left:auto; display:flex; align-items:baseline; gap:8px; }
nav.main .langs a { margin-left:0; }
.theme-toggle {
  border:0; background:none; color:var(--muted); font:inherit;
  cursor:pointer; padding:0; line-height:inherit; text-transform:lowercase;
}
.theme-toggle:hover { color:var(--fg); }
nav.main .langs a.active { text-decoration:underline; }
hr.rule { border:0; border-top:1px solid var(--rule); margin:22px 0; }
h1,h2,h3,h4 { font-weight:700; line-height:1.3; }
h1.page { font-size:15px; text-transform:lowercase; letter-spacing:.04em; margin:0 0 18px; }
main h2 { font-size:14px; margin:26px 0 8px; }
main h3 { font-size:13px; margin:20px 0 6px; }
main h4 { font-size:13px; color:var(--muted); margin:16px 0 6px; }
p { margin:0 0 12px; }
img, video { max-width:100%; height:auto; }
main iframe { border:0; max-width:100%; }
figure { margin:16px 0; }
figcaption { color:var(--muted); font-size:12px; margin-top:6px; }
blockquote:not(.instagram-media) {
  margin:12px 0; padding:0 0 0 14px; border-left:2px solid var(--rule);
  color:var(--blockquote);
}
code { background:var(--code-bg); padding:1px 4px; border-radius:2px; }
pre { background:var(--pre-bg); padding:12px; overflow:auto; border:1px solid var(--rule); }
mark { background:var(--mark-bg); color:var(--mark-fg); }
pre code { background:none; padding:0; }
.video-responsive {
  position:relative; width:100%; aspect-ratio:16/9; margin:16px 0;
  overflow:hidden;
}
.video-responsive--portrait { aspect-ratio:9/16; }
.video-responsive iframe {
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
.embed-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:18px; margin:16px 0;
}
.embed-grid-caption {
  color:var(--muted); font-size:12px; margin-bottom:8px;
}
.embed-grid .video-responsive { margin:0; }
.embed-instagram { margin:16px auto; max-width:540px; width:100%; }
blockquote.instagram-media {
  margin:0 auto !important; padding:0 !important; border:0 !important;
  max-width:100% !important; min-width:0 !important; width:100% !important;
}
.embed-instagram iframe {
  display:block; width:100% !important; min-width:0 !important;
  max-width:100% !important; margin:0 auto !important;
}
table.list { width:100%; border-collapse:collapse; margin:8px 0 0; }
table.list th, table.list td {
  text-align:left; vertical-align:top; padding:7px 10px 7px 0;
  border-bottom:1px solid var(--rule); font-weight:400;
}
table.list th { color:var(--muted); font-weight:400; border-bottom:1px solid var(--fg); }
table.list td.year { color:var(--muted); white-space:nowrap; width:1%; }
table.list td.tags { color:var(--muted); font-size:12px; }
table.list tr.group td { color:var(--fg); padding-top:18px; border-bottom:1px solid var(--fg); text-transform:lowercase; }
.post-meta { color:var(--muted); font-size:12px; margin:0 0 18px; }
.post-tags { margin-top:24px; }
.cover { margin:0 0 20px; }
.works-grid {
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:22px 18px; margin:8px 0 0;
}
@media (max-width:720px) { .works-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:420px) { .works-grid { grid-template-columns:1fr; } }
.works-tile a { display:block; border:0; color:inherit; }
.works-tile a:hover .works-title { border-bottom-color:var(--fg); }
.works-thumb {
  aspect-ratio:4/3; background:var(--thumb-bg); margin-bottom:8px;
  overflow:hidden; border:1px solid var(--rule);
}
.works-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.works-thumb--empty {
  display:flex; align-items:center; justify-content:center;
  padding:12px; color:var(--muted); font-size:11px; text-align:center;
}
.works-title {
  font-size:12px; line-height:1.4;
  border-bottom:1px solid var(--rule); display:inline;
}
.works-year { color:var(--muted); font-size:11px; margin-top:4px; }
body.layout-wide .wrap { max-width:1080px; }
.post-nav { position:fixed; top:50%; transform:translateY(-50%); z-index:10; }
.post-nav--prev { left:max(8px, calc(50% - 580px)); }
.post-nav--next { right:max(8px, calc(50% - 580px)); }
.post-nav a {
  display:block; padding:14px 12px; border:1px solid var(--rule);
  background:var(--bg); color:var(--muted); font-size:18px; line-height:1;
  min-width:44px; text-align:center;
}
.post-nav a:hover { color:var(--fg); border-color:var(--fg); }
@media (max-width:900px) {
  .post-nav--prev { left:8px; }
  .post-nav--next { right:8px; }
}
.tag-list { display:flex; flex-wrap:wrap; gap:8px 14px; margin:0 0 22px; }
.tag-list a {
  border:0; color:var(--muted); font-size:12px; text-transform:lowercase;
}
.tag-list a:hover, .tag-list a.active { color:var(--fg); text-decoration:underline; }
.muted { color:var(--muted); }
footer.site { margin-top:60px; color:var(--muted); font-size:12px; }
footer.site a { color:var(--muted); }
.social a { border:0; margin-right:12px; }