/* Minimal, book-inspired layout with dark/light themes */
:root{
  --bg: #f7f7f6;
  --text: #111;
  --muted: #6b6b6b;
  --border: #e5e5e5;
  --accent: #111;
  --shadow: rgba(0,0,0,.06);
}
html[data-theme="dark"]{
  --bg:#111213; --text:#f3f3f3; --muted:#a8a8a8; --border:#2a2a2a; --accent:#f3f3f3; --shadow:rgba(0,0,0,.3);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
a:hover{opacity:.8}
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; border-bottom:1px solid var(--border);
  backdrop-filter:saturate(180%) blur(8px);
  background:color-mix(in oklab, var(--bg) 85%, transparent);
}
.brand{display:flex; align-items:center; gap:8px}
.favicon{width:18px; height:18px; border-radius:2px; box-shadow:0 0 0 1px var(--border)}
.brand-name{font-weight:600; letter-spacing:.2px}
.nav{display:flex; align-items:center; gap:14px}
.nav a{padding:6px 8px; border-radius:8px}
.nav a.active{background:var(--border)}
.toggle{
  border:1px solid var(--border); background:none; color:var(--text);
  padding:6px 8px; border-radius:10px; cursor:pointer; box-shadow:0 2px 6px var(--shadow);
}
.container{max-width:1200px; margin:0 auto; padding:24px 16px}
.narrow{max-width:800px}
.split{
  display:grid; grid-template-columns: 1fr 420px; gap:28px; align-items:start;
}
.media{margin:0}
.hero{width:100%; height:auto; display:block; box-shadow:0 8px 24px var(--shadow)}
.caption{position:relative}
.work-code{font-size:14px; color:var(--muted); margin:.25rem 0 .5rem}
.work-title{font-size:28px; line-height:1.2; margin:0 0 8px}
.meta{color:var(--muted); margin:0 0 12px}
.note{font-size:12px; color:var(--muted)}
.site-footer{border-top:1px solid var(--border); padding:18px 16px; margin-top:40px}

.visually-hidden{position:absolute !important; clip:rect(1px,1px,1px,1px); padding:0; border:0; height:1px; width:1px; overflow:hidden}

@media (max-width: 900px){
  .split{grid-template-columns: 1fr; gap:16px}
  .caption{order:2}
}