:root {
  color-scheme: light dark;
  --bg: #f8f7f3;
  --surface: #ffffff;
  --text: #242522;
  --muted: #666962;
  --border: #d8d8d1;
  --accent: #225f77;
  --code-bg: #eeeee8;
}

* { box-sizing: border-box; }
html { font-size: 17px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}
a { color: var(--accent); }
a:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.site-header, .site-grid, .site-footer { width: min(1120px, calc(100% - 2rem)); margin-inline: auto; }
.site-header { width: 100%; margin: 0; padding: 0; border-bottom: 1px solid var(--border);
  background: #070b16 url("/images/site/header.jpg") center 30% / cover no-repeat; color: #fff; }
.site-header-inner { width: min(1120px, calc(100% - 2rem)); margin-inline: auto; padding: 4.5rem 0 3rem; }
.site-title, .site-subtitle { display: block; width: fit-content; color: #fff; text-decoration: none; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.site-title { font-size: clamp(1.7rem, 4vw, 2.35rem); font-weight: 750; letter-spacing: -0.035em; line-height: 1.15; }
.site-subtitle { margin-top: .25rem; color: #d9dde6; font-size: .95rem; }
.site-grid { display: grid; grid-template-columns: minmax(0, 720px) 260px; justify-content: space-between; gap: 3.5rem; padding-block: 2.5rem 4rem; }
main { min-width: 0; }
h1, h2, h3 { line-height: 1.22; overflow-wrap: anywhere; }
h1 { margin: 0 0 1rem; font-size: clamp(2rem, 6vw, 3rem); letter-spacing: -.035em; }
h2 { font-size: 1.45rem; }
.page-header, .post-header { padding-bottom: 1rem; border-bottom: 1px solid var(--border); margin-bottom: 2rem; }
.post-date { display: flex; flex-wrap: wrap; gap: .35rem 1rem; color: var(--muted); margin-bottom: .75rem; }
.post-labels { display: flex; flex-wrap: wrap; gap: .4rem .75rem; padding: 0; margin: 0; list-style: none; font-size: .9rem; }
.post-body { overflow-wrap: anywhere; }
.post-body a { text-decoration: underline; text-underline-offset: .15em; }
.post-body a[imageanchor], .post-body a:has(> img) { margin-inline: 0 !important; }
.post-body img { max-width: 100%; height: auto; }
.post-body figure.diagram { max-width: 100%; margin: 2rem 0; }
.post-body figure.diagram img { display: block; width: 100%; }
.post-body iframe { max-width: 100%; }
.post-body iframe[src*="youtube.com"], .post-body iframe[src*="youtu.be"] { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
.post-body pre { max-width: 100%; overflow-x: auto; padding: 1rem; background: var(--code-bg); border: 1px solid var(--border); }
.post-body code { font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace; font-size: .9em; }
.post-body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.post-body th, .post-body td { padding: .45rem .6rem; border: 1px solid var(--border); }
.post-body .separator { max-width: 100%; }
.post-related { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.post-related h2 { margin: 0 0 .6rem; font-size: 1.1rem; }
.post-related ul { margin: 0; padding-left: 1.2rem; }
.post-related li { margin: .3rem 0; overflow-wrap: anywhere; }
.post-navigation { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.post-navigation a { overflow-wrap: anywhere; }
.post-navigation a:last-child { text-align: right; grid-column: 2; }
.post-navigation span { display: block; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.post-list { padding: 0; margin: 0; list-style: none; }
.post-list li { padding: 0 0 2rem; margin: 0 0 2rem; border-bottom: 1px solid var(--border); }
.post-list li.has-thumb { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.post-thumb img { display: block; width: 160px; height: 100px; object-fit: cover; border: 1px solid var(--border); background: var(--code-bg); }
.post-share { margin-top: 2rem; color: var(--muted); font-size: .9rem; }
.post-share a { margin-left: .5rem; }
.avatar { display: block; width: 120px; height: auto; margin-bottom: .6rem; }
.post-list h2 { margin: 0 0 .3rem; }
.post-list time { color: var(--muted); font-size: .9rem; }
.post-list p { margin-bottom: 0; }
.sidebar { font-size: .88rem; }
.sidebar section { padding-bottom: 1.4rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--border); }
.sidebar h2 { margin: 0 0 .65rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.sidebar h3 { margin: 0; font-size: 1rem; }
.sidebar p { margin-top: .55rem; }
.start-list { padding-left: 1.25rem; }
.start-list li + li, .plain-list li + li { margin-top: .38rem; }
.plain-list { padding: 0; list-style: none; }
.plain-list span { color: var(--muted); }
.social-links { display: flex; gap: 1rem; }
.site-footer { display: flex; justify-content: space-between; gap: 1rem; padding-block: 1.25rem 2rem; border-top: 1px solid var(--border); color: var(--muted); font-size: .9rem; }

.mobile-nav { display: none; }

@media (max-width: 959px) {
  .mobile-nav { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; width: min(720px, calc(100% - 2rem)); margin: 1rem auto 0; font-size: .95rem; }
  .site-grid { grid-template-columns: minmax(0, 720px); justify-content: center; }
  .sidebar { margin-top: 1rem; }
}

@media (max-width: 520px) {
  .site-header-inner, .site-grid, .site-footer, .mobile-nav { width: min(100% - 1.25rem, 720px); }
  .site-header-inner { padding: 2.5rem 0 1.75rem; }
  .post-list li.has-thumb { grid-template-columns: 1fr; }
  .post-thumb img { width: 100%; height: auto; aspect-ratio: 16 / 10; }
  .site-grid { padding-top: 1.75rem; }
  .post-navigation { grid-template-columns: 1fr; }
  .post-navigation a:last-child { grid-column: 1; text-align: left; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161816;
    --surface: #1d201d;
    --text: #e8e9e4;
    --muted: #adafa8;
    --border: #3b3e39;
    --accent: #82c7df;
    --code-bg: #232622;
  }
}
.footer-links { display: flex; gap: 1rem; }
.contact-line { overflow-wrap: anywhere; }
.page-body h2 { margin-top: 1.6rem; }