/* ---------- Colours and width: change these ---------- */
:root {
  --bg:#ffffff; --fg:#1a1a1a; --muted:#6a6a6a; --line:#e6e6e6; --soft:#f4f4f4;
  --w:42rem;
}
html[data-theme="dark"] { --bg:#111111; --fg:#f2f2f2; --muted:#9a9a9a; --line:#2a2a2a; --soft:#1c1c1c; color-scheme:dark; }

/* ---------- Base ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg); color:var(--fg);
  font:400 1.0625rem/1.7 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-underline-offset:3px; }
img, video, iframe { max-width:100%; display:block; }
:focus-visible { outline:2px solid var(--fg); outline-offset:3px; border-radius:3px; }
.wrap { max-width:var(--w); margin:0 auto; padding:0 1.5rem; }
h1, h2, h3 { line-height:1.2; letter-spacing:-0.02em; margin:0; }

/* ---------- Header and footer ---------- */
.site-header { border-bottom:1px solid var(--line); }
.bar { display:flex; justify-content:space-between; align-items:center; gap:.75rem 1.5rem; flex-wrap:wrap; padding-top:1.1rem; padding-bottom:1.1rem; }
.brand { font-weight:700; text-decoration:none; font-size:1.05rem; }
.bar-right { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.bar nav { display:flex; gap:1.5rem; }
.theme-toggle {
  font:inherit; font-size:.85rem; line-height:1; color:var(--fg); background:transparent;
  border:1px solid var(--line); border-radius:6px; padding:.4rem .7rem; cursor:pointer;
}
.theme-toggle:hover { border-color:var(--fg); }
.bar nav a { text-decoration:none; color:var(--muted); font-size:.98rem; padding:.2rem 0; border-bottom:2px solid transparent; }
.bar nav a:hover { color:var(--fg); }
.bar nav a[aria-current="page"] { color:var(--fg); border-bottom-color:var(--fg); }
main.wrap { padding-top:3.5rem; padding-bottom:4rem; }
.site-footer { border-top:1px solid var(--line); padding:1.75rem 0 2.5rem; color:var(--muted); font-size:.9rem; text-align:center; }

/* ---------- Page headings and text ---------- */
.page-head { margin-bottom:2rem; }
.page-head h1 { font-size:2.4rem; letter-spacing:-0.03em; }
.hero h1 { font-size:2.6rem; line-height:1.15; }
.page-head .prose { margin-top:1rem; color:var(--muted); }
.prose p { margin:0 0 1.1rem; }
.prose h2 { font-size:1.4rem; margin:2.25rem 0 .75rem; }
.prose ul { margin:0 0 1.1rem; padding-left:1.25rem; }
.prose li { margin:.25rem 0; }
.prose a { text-decoration-thickness:1px; }
.prose a:hover { text-decoration-thickness:2px; }

/* ---------- Tags ---------- */
.tags { display:flex; gap:.4rem; flex-wrap:wrap; }
.tag {
  display:inline-block; font-size:.8rem; line-height:1; padding:.4rem .75rem; border-radius:999px;
  border:1px solid var(--line); background:var(--soft); color:var(--fg); text-decoration:none;
  transition:background .15s, color .15s, border-color .15s;
}
.tag:hover { border-color:var(--fg); }
.tag.active { background:var(--fg); color:var(--bg); border-color:var(--fg); }
.filters { display:flex; gap:.5rem; flex-wrap:wrap; margin:0 0 .5rem; }
.filters .tag { font-size:.9rem; padding:.5rem .9rem; }

/* ---------- Portfolio list ---------- */
.feed { margin-top:1.5rem; }
.entry { padding:2.5rem 0; border-top:1px solid var(--line); }
.feed .entry:first-child { border-top:0; padding-top:1.5rem; }
.entry-thumb { display:block; aspect-ratio:16/9; border-radius:8px; overflow:hidden; background:var(--soft); margin-bottom:1.1rem; }
.entry-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.entry-thumb:hover img { transform:scale(1.02); }
.entry-media { margin-bottom:1.1rem; }
.entry h2 { font-size:1.6rem; }
.entry h2 a { text-decoration:none; }
.entry h2 a:hover { text-decoration:underline; text-decoration-thickness:2px; }
.summary { margin:.5rem 0 0; color:var(--muted); }
.project-top { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:.8rem; }
.year { color:var(--muted); font-size:.9rem; }

/* ---------- Project page ---------- */
.back { display:inline-block; margin-bottom:2rem; color:var(--muted); text-decoration:none; font-size:.95rem; }
.back:hover { color:var(--fg); text-decoration:underline; }
.project-page h1 { font-size:2.4rem; letter-spacing:-0.03em; }
.tools { margin:.5rem 0 0; color:var(--muted); font-size:.95rem; }
.lead { margin:1.25rem 0 0; font-size:1.2rem; line-height:1.6; }
.project-body { margin-top:1.75rem; }
.project-body p { margin:0 0 1.1rem; }
.project-body h2 { font-size:1.4rem; margin:2.25rem 0 .75rem; }
.project-body ul { padding-left:1.25rem; margin:0 0 1.1rem; }
.pager { display:flex; justify-content:space-between; gap:1.5rem; margin-top:4rem; padding-top:1.75rem; border-top:1px solid var(--line); }
.pager a { text-decoration:none; font-weight:600; max-width:48%; }
.pager a span { display:block; color:var(--muted); font-weight:400; font-size:.85rem; margin-bottom:.15rem; }
.pager a:hover { text-decoration:underline; }
.pager .next { text-align:right; margin-left:auto; }

figure { margin:1.75rem 0 0; }
figcaption { margin-top:.5rem; color:var(--muted); font-size:.9rem; }
figure img, figure video { width:100%; height:auto; border-radius:8px; background:var(--soft); }
.embed { position:relative; aspect-ratio:16/9; border-radius:8px; overflow:hidden; background:var(--soft); }
.embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.gallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%,12rem), 1fr)); gap:.6rem; }
.gallery img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:6px; }
.error { border:1px solid var(--fg); border-radius:6px; padding:.6rem .9rem; font-size:.95rem; }

/* ---------- Home: recent work ---------- */
.recent { margin-top:3.5rem; padding-top:2.5rem; border-top:1px solid var(--line); }
.recent h2 { font-size:1.4rem; margin-bottom:1.5rem; }
.recent ul { list-style:none; margin:0; padding:0; display:grid; gap:1.75rem; }
.recent li { display:grid; grid-template-columns:10rem 1fr; gap:1.25rem; align-items:start; }
.recent .thumb { display:block; aspect-ratio:16/9; border-radius:6px; overflow:hidden; background:var(--soft); }
.recent .thumb img { width:100%; height:100%; object-fit:cover; }
.recent h3 { font-size:1.15rem; margin:.5rem 0 .25rem; }
.recent h3 a { text-decoration:none; }
.recent h3 a:hover { text-decoration:underline; }
.recent p { margin:0; color:var(--muted); font-size:.96rem; line-height:1.55; }
.more { font-weight:600; }
@media (max-width:560px) {
  .recent li { grid-template-columns:1fr; gap:.75rem; }
  .page-head h1, .hero h1 { font-size:2rem; }
  main.wrap { padding-top:2.5rem; }
}

@media (prefers-reduced-motion:reduce) { * { transition:none !important; scroll-behavior:auto !important; } }