/* Blog pages (generated by scripts/blog.ts). Same palette and type as the home page; plain reading layout. The only script is one
   line in <head> that applies the dark theme if it was chosen on the home page (localStorage 'nyg-theme'). */
:root { color-scheme: light; --paper: #efe8dc; --card: #fffaf0; --ink: #393837; --muted: #4a463f; --deep: #131217; --on-deep: #efe8dc; --rule: rgba(57,56,55,.18);
  --hot: #ff4b1f; --hot-text: #9e2b07; --k-project-text: #2f43b0; --f-display: Archivo, 'Archivo Black', sans-serif; --f-body: Archivo, system-ui, sans-serif; --f-mono: 'Geist Mono', ui-monospace, monospace; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-body); font-weight: 500; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--hot); text-decoration-thickness: 3px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
::selection { background: var(--hot); color: var(--deep); }
.mono { font: 500 .75rem/1.6 var(--f-mono); text-transform: uppercase; letter-spacing: 0; }
.skip { position: absolute; left: -999px; top: .5rem; z-index: 9; background: var(--ink); color: var(--paper); padding: .6rem 1rem; }
.skip:focus { left: .5rem; }

.bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .4rem 1.1rem; border-bottom: 1px solid var(--rule); }
.bar .logo { font: 900 1.5rem/1 var(--f-display); letter-spacing: -.05em; word-spacing: .14em; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.bar nav { display: flex; gap: .3rem 1.2rem; flex-wrap: wrap; }
.bar nav a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; font-weight: 600; }
.bar nav a[aria-current='page'] { text-decoration: underline; text-decoration-color: var(--hot); text-decoration-thickness: 3px; text-underline-offset: 6px; }

main { max-width: 46rem; margin: 0 auto; padding: clamp(2.5rem, 7vw, 5rem) 1.1rem 3rem; }
.head h1 { font: 900 clamp(2.2rem, 6vw, 4rem)/.95 var(--f-display); letter-spacing: -.05em; margin: .6rem 0 1rem; }
.head .lead { font-size: 1.2rem; line-height: 1.45; font-weight: 600; margin: 0 0 2rem; color: var(--muted); }
.head .mono a { text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }

.posts { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; }
.posts li { border-top: 1px solid var(--rule); }
.posts li:last-child { border-bottom: 1px solid var(--rule); }
.posts a { display: block; padding: 1.4rem 0; text-decoration: none; }
.posts a:hover h2 { text-decoration: underline; text-decoration-color: var(--hot); text-decoration-thickness: 3px; }
.posts h2 { font: 800 clamp(1.4rem, 3vw, 1.9rem)/1.1 var(--f-display); letter-spacing: -.03em; margin: .35rem 0 .45rem; }
.posts p { margin: 0; line-height: 1.5; color: var(--muted); }
.empty { padding: 2rem 0; border-top: 1px solid var(--rule); color: var(--muted); }

.prose { font-size: 1.1rem; line-height: 1.7; }
.prose h2 { font: 800 clamp(1.5rem, 3.2vw, 2rem)/1.1 var(--f-display); letter-spacing: -.03em; margin: 2.4rem 0 .8rem; }
.prose h3 { font: 800 1.25rem/1.2 var(--f-display); letter-spacing: -.02em; margin: 1.8rem 0 .6rem; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.1rem; }
.prose li { margin: .3rem 0; }
.prose blockquote { margin: 1.4rem 0; padding: .2rem 0 .2rem 1.1rem; border-left: 4px solid var(--hot); color: var(--muted); }
.prose code { font: 500 .9em var(--f-mono); background: var(--tint, rgba(57,56,55,.08)); padding: .1em .35em; border-radius: 4px; }
.prose pre { background: var(--deep); color: var(--on-deep); padding: 1rem 1.1rem; border-radius: 12px; overflow-x: auto; font-size: .92rem; line-height: 1.55; margin: 1.4rem 0; }
.prose pre code { background: none; padding: 0; color: inherit; }
.prose img { max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--rule); }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.4rem 0; }
.prose a { color: var(--k-project-text); }
.end { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.end a { display: inline-flex; min-height: 44px; align-items: center; }

.foot { max-width: 46rem; margin: 0 auto; padding: 1.4rem 1.1rem 3rem; color: var(--muted); }
.foot a { display: inline-flex; min-height: 44px; align-items: center; }
.skip { min-height: 44px; display: inline-flex; align-items: center; } .skip:focus-visible { outline-color: var(--hot); }
.foot a { min-width: 44px; justify-content: center; }

/* dark theme: same tokens as the home page */
html[data-theme='dark'] { color-scheme: dark; --paper: #16151a; --card: #1f1e25; --ink: #ece6da; --muted: #bdb6aa; --deep: #0b0a0e; --rule: rgba(236,230,218,.16); --hot-text: #ff8a63; --k-project-text: #a9b9ff; --tint: rgba(236,230,218,.07); }
/* page transition within and into the Blog (cross-document View Transitions; browsers without them just navigate). The Blog opens out of a
   centre box, the same opening as on the home page; only when going to a /blog/ page (the head script skips the rest). */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
::view-transition-old(root) { animation: pt-out .5s ease both; }
::view-transition-new(root) { animation: pt-in .8s cubic-bezier(.65, 0, .25, 1) both; }
@keyframes pt-out { to { opacity: .3; transform: scale(.96); } }
@keyframes pt-in { from { clip-path: inset(44% 44% round 8px); } to { clip-path: inset(0 round 0); } }