/* Self-hosted fonts (SIL OFL 1.1; see fonts/OFL-*.txt). No external CDNs. */
@font-face { font-family: "Lilita One"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/lilita-one-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/nunito-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/nunito-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Nunito"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/nunito-latin-400-italic.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Lilita One"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/lilita-one-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/nunito-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/nunito-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/nunito-latin-ext-400-italic.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* Single stylesheet. Light/dark follows the visitor's system setting. */
:root {
  --bg: #fcfcfb; --fg: #1f2328; --muted: #5b5348; --border: #d9cfb8;
  --accent: #1d4ed8; --card: #ffffff; --code-bg: #f3f3f0;
  --measure: 40rem;
  --panel: rgba(255, 248, 232, .92); --panel-border: #2d4a22; --shadow: rgba(20, 40, 15, .45);
  --display: "Lilita One", "Chalkboard SE", "Marker Felt", "Trebuchet MS", "Arial Rounded MT Bold", system-ui, sans-serif;
  --backdrop: url("jungle-backdrop-1600.jpg"); --tint: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0));
  --sans: "Nunito", "Quicksand", "Varela Round", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Nunito", "Quicksand", "Varela Round", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #111315; --fg: #ecece6; --muted: #b3bbb0; --border: #34493a;
          --accent: #8db6ff; --card: #181b1e; --code-bg: rgba(255,255,255,.08);
          --panel: rgba(10, 22, 15, .88); --panel-border: #6fbf4f; --shadow: rgba(0, 0, 0, .6);
          --tint: linear-gradient(rgba(0,15,5,.4), rgba(0,15,5,.4)); }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Jungle backdrop: fixed, full-viewport, cover, anchored top-center. */
html { background: var(--tint), var(--backdrop) center top / cover no-repeat fixed, var(--bg); }
body { margin: 0; background: transparent; color: var(--fg); font: 1.0625rem/1.7 var(--serif);
       min-height: 100vh; display: flex; flex-direction: column; padding: 1.25rem 0.75rem; gap: 1.25rem; }
main { width: 100%; }
.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 1.5rem; }
/* Readable semi-opaque rounded cartoon panels for header, content and footer. */
.site-header .wrap, main.wrap, .site-footer .wrap {
  width: 100%; background: var(--panel); border: 3px solid var(--panel-border); border-radius: 22px;
  box-shadow: 5px 6px 0 var(--shadow); }
main { flex: 0 0 auto; }
.site-footer { margin-top: auto; }
@supports (backdrop-filter: blur(1px)) { .site-header .wrap, main.wrap, .site-footer .wrap { backdrop-filter: blur(2px); } }
/* iOS/Android: background-attachment:fixed is flaky, so use a fixed pseudo-element layer instead. */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  html { background: var(--bg); }
  body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
                 background: var(--tint), var(--backdrop) center top / cover no-repeat; }
}
a { color: var(--accent); text-underline-offset: 2px; }
img, video, iframe { max-width: 100%; }

.site-header { font-family: var(--sans); }
.site-header .wrap { display: flex; justify-content: space-between; align-items: center;
                     gap: 1rem; padding-top: 1rem; padding-bottom: 1rem; flex-wrap: wrap; }
.site-name { font: 400 1.5rem var(--display); letter-spacing: .01em; color: var(--fg); text-decoration: none; }
nav a { margin-left: 1.1rem; color: var(--muted); text-decoration: none; font: 400 1.05rem var(--display); letter-spacing: .02em; }
nav a:hover, nav a[aria-current="page"] { color: var(--fg); }
nav a[aria-current="page"] { border-bottom: 2px solid var(--accent); padding-bottom: 2px; }

.intro { padding: 1.75rem 0 .5rem; font-family: var(--sans); }
.intro h1 { margin: 0 0 .25rem; font: 400 2.4rem/1.2 var(--display); letter-spacing: .01em; line-height: 1.2; }
.intro p { margin: 0; color: var(--muted); }

.posts { padding: .5rem 0 1.5rem; }
.card { padding: 1.5rem 0; border-bottom: 1px solid var(--border); }
.card:last-child { border-bottom: 0; }
.card .cover img { display: block; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover;
                   border-radius: 10px; margin-bottom: 1rem; background: var(--code-bg); }
.card h2 { margin: 0; font: 400 1.6rem/1.3 var(--display); letter-spacing: .01em; }
.card h2 a { color: var(--fg); text-decoration: none; }
.card h2 a:hover { color: var(--accent); }
.meta { margin: .3rem 0 0; color: var(--muted); font: .875rem var(--sans); }
.excerpt { margin: .6rem 0 0; color: var(--fg); opacity: .85; }

.post-header { padding: 1.75rem 0 1rem; }
.post-header h1, .prose h1:first-child { margin: 0; font: 400 2.4rem/1.2 var(--display); letter-spacing: .01em; }
.prose { padding-bottom: 1.5rem; }
.about, main > .prose { padding-top: 1.5rem; }
.prose h2, .prose h3 { font-family: var(--display); font-weight: 400; line-height: 1.3; margin: 2rem 0 .5rem; }
.prose p, .prose ul, .prose ol, .prose pre, .prose table { margin: 0 0 1.1rem; }
.prose img { display: block; height: auto; margin: 1.5rem auto; border-radius: 8px; }
.prose em > img, .prose p > em:only-child { color: var(--muted); }
.prose blockquote { margin: 1.25rem 0; padding: .1rem 1rem; border-left: 4px solid var(--accent);
                    color: var(--muted); background: transparent; }
.prose code { font: .9em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
              background: var(--code-bg); padding: .1em .35em; border-radius: 4px; }
.prose pre { background: var(--code-bg); padding: 1rem; border-radius: 8px; overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose table { border-collapse: collapse; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--border); padding: .4rem .7rem; }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }

.video { margin: 1.5rem 0; border-radius: 8px; overflow: hidden; background: #000; }
.video video { display: block; width: 100%; height: auto; }
.video.embed { position: relative; aspect-ratio: 16 / 9; }
.video.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.back { font-family: var(--sans); padding-bottom: 2rem; }
.site-footer { color: var(--fg); font: .85rem var(--sans); }
.site-footer .wrap { padding-top: 1.25rem; padding-bottom: 1.25rem; }

@media (max-width: 520px) {
  body { padding: .75rem .5rem; gap: .75rem; }
  .wrap { padding: 0 1.1rem; }
  body { font-size: 1rem; }
  .intro h1, .post-header h1, .prose h1:first-child { font-size: 1.7rem; }
  .card h2 { font-size: 1.3rem; }
}