/* ---- Reset ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
img { display: block; max-width: 100%; }
a { color: inherit; }

/* ---- Tokens --------------------------------------------------- */
:root {
  color-scheme: light dark;

  --font-sans: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;

  --measure: 42rem;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);

  /* Light theme — warm paper / aluminium */
  --bg:          #f4f3f0;
  --bg-tint:     #eceae5;
  --surface:     #ffffff;
  --fg:          #16161a;
  --fg-soft:     #3c3c43;
  --muted:       #76757c;
  --faint:       #9b9aa1;
  --rule-rgb:    20,20,26;
  --rule-alpha:  0.10;
  --rule:        rgba(var(--rule-rgb), var(--rule-alpha));
  --rule-strong: rgba(var(--rule-rgb), calc(var(--rule-alpha) * 2.2));
  --accent:      #1761d4;
  --accent-deep: #0f4aa6;
  --mark:        #1761d4;
  --selection:   rgba(23,97,212,0.16);

  /* Code panel — deep "instrument" screen, identical in both modes */
  --code-bg:     #1b1b24;
  --code-bar:    #13131c;
  --code-fg:     #d8d8dd;
  --code-line:   rgba(255,255,255,0.07);
  --code-muted:  #66666f;
  --code-edge:   rgba(255,255,255,0.10);
  --tok-comment: #61616b;
  --tok-keyword: #6ba6ec;
  --tok-string:  #a6bf8c;
  --tok-class:   #5fb6ad;
  --tok-const:   #b89bdd;
  --tok-deco:    #d98aa0;
  --tok-func:    #cfcfd4;
  --tok-punc:    #93939b;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #131316;
    --bg-tint:     #1a1a1f;
    --surface:     #1b1b20;
    --fg:          #e9e9ec;
    --fg-soft:     #c5c5cb;
    --muted:       #8e8e96;
    --faint:       #65656d;
    --rule-rgb:    255,255,255;
    --rule-alpha:  0.12;
    --accent:      #1761d4;
    --accent-deep: #0f4aa6;
    --mark:        #1761d4;
    --selection:   rgba(23,97,212,0.22);
  }
}

::selection { background: var(--selection); }

/* ---- Base ----------------------------------------------------- */
html { font-size: 100%; }
body {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* ---- Layout shell -------------------------------------------- */
.page {
  width: 100%;
  max-width: calc(64rem + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.page > main { flex: 1 0 auto; padding-bottom: 5rem; }
.page--home { max-width: calc(var(--home-w, 64rem) + var(--gutter) * 2); }
.measure { max-width: var(--measure); }

/* ---- Mono label ---------------------------------------------- */
.label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
}
.label--accent { color: var(--accent); }

.name-accent { color: var(--accent); }
.label a { text-decoration: none; color: inherit; }

/* ---- Header --------------------------------------------------- */
.site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.9rem 1.6rem;
}
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-decoration: none;
  transition: opacity .15s ease;
}
.wordmark:hover { opacity: 0.65; }
.site-nav {
  display: flex;
  gap: 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.site-nav a {
  color: var(--muted);
  text-decoration: none;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--fg); border-color: var(--rule-strong); }
.site-nav a[aria-current="page"] { color: var(--accent); border-color: var(--accent); }

/* ---- Links (prose) ------------------------------------------- */
.hero__lead a {
  color: var(--fg-soft);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--fg-soft) 28%, transparent);
  transition: color .15s ease, text-decoration-color .15s ease;
}
.hero__lead a:hover {
  color: var(--fg);
  text-decoration-color: var(--fg-soft);
}
.prose a, a.link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--accent) 38%, transparent);
  transition: text-decoration-color .15s ease, color .15s ease;
}
.prose a:hover, a.link:hover {
  color: var(--accent-deep);
  text-decoration-color: var(--accent);
}

/* divider visibility toggles */
body.no-header-rule  .site-header { border-bottom-color: transparent; }
body.no-contact-rule .contact     { border-top-color: transparent; }
body.no-footer-rule  .site-footer { border-top-color: transparent; }

/* ---- Footer --------------------------------------------------- */
.site-footer {
  margin-top: auto;
  padding-block: 2.4rem 2.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  justify-content: space-between;
}
.site-footer a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--rule); }
.site-footer a:hover { color: var(--fg); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.3rem; }
.footer-nav a { border-bottom-color: transparent; }
.footer-nav a:hover { border-bottom-color: var(--rule-strong); }

/* ---- Headings ------------------------------------------------- */
h1, h2, h3 { font-weight: 700; letter-spacing: -0.018em; line-height: 1.08; }
.balance { text-wrap: balance; }

/* =================================================================
   Code panels — the instrument screen
   ================================================================= */
.code {
  --pad: clamp(1rem, 3vw, 1.5rem);
  background: var(--code-bg);
  border: 1px solid var(--code-edge);
  border-radius: 6px;
  overflow: hidden;
  margin-block: 1.9rem;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 18px 40px -28px rgba(0,0,0,0.45);
}
.code__bar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem var(--pad);
  background: var(--code-bar);
  border-bottom: 1px solid var(--code-line);
}
.code__dot {
  width: 0.46rem; height: 0.46rem; border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.code__name {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--code-fg);
}
.code__lang {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--code-muted);
}
.code pre {
  margin: 0;
  padding: var(--pad);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--code-fg);
  tab-size: 4;
}
.code pre code { font: inherit; color: inherit; white-space: pre; }

/* token colours */
.t-com { color: var(--tok-comment); font-style: italic; }
.t-kw  { color: var(--tok-keyword); }
.t-str { color: var(--tok-string); }
.t-cls { color: var(--tok-class); }
.t-num,
.t-con { color: var(--tok-const); }
.t-fn  { color: var(--tok-func); }
.t-op  { color: var(--tok-deco); }
.t-pn  { color: var(--tok-punc); }

.code__hl {
  display: block;
  background: rgba(90,167,238,0.09);
  box-shadow: inset 2px 0 0 var(--accent);
  margin-inline: calc(var(--pad) * -1);
  padding-inline: calc(var(--pad) - 2px) var(--pad);
}

/* ---- Inline code --------------------------------------------- */
:not(pre) > code.inline,
.prose :not(pre) > code,
code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--bg-tint);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.08em 0.36em;
  color: var(--fg-soft);
  overflow-wrap: break-word;
}
pre code { white-space: pre; background: none; border: none; padding: 0; color: inherit; }

/* =================================================================
   Prose (article body)
   ================================================================= */
.prose { max-width: var(--measure); margin-inline: auto; }
.prose > * + * { margin-top: 1.15rem; }
.prose p { color: var(--fg-soft); }
.prose h2 {
  font-size: 1.45rem;
  margin-top: 3rem;
  padding-top: 0.2rem;
  color: var(--fg);
}
.prose h3 { font-size: 1.12rem; margin-top: 2.2rem; color: var(--fg); }
.prose ul, .prose ol { padding-left: 0; list-style: none; color: var(--fg-soft); }
.prose ol { counter-reset: item; }
.prose ol > li, .prose ul > li {
  position: relative;
  padding-left: 2.4rem;
  margin-top: 0.7rem;
}
.prose ol > li::before {
  counter-increment: item;
  content: counter(item, decimal-leading-zero);
  position: absolute; left: 0; top: 0.06em;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.prose ul > li::before {
  content: "";
  position: absolute; left: 0.4rem; top: 0.62em;
  width: 0.42em; height: 0.42em;
  background: var(--mark);
}
.prose .code { max-width: var(--measure); }

/* Chroma syntax highlighting (dracula palette) */
.chroma { background-color: transparent !important; -webkit-text-size-adjust: none; }
.chroma .lnlinks { outline: none; text-decoration: none; color: inherit; }
.chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
.chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
.chroma .hl { background-color: rgba(90,167,238,0.09); box-shadow: inset 2px 0 0 var(--accent); }
.chroma .lnt { white-space: pre; user-select: none; margin-right: .4em; padding: 0 .4em; color: #7f7f7f; }
.chroma .ln  { white-space: pre; user-select: none; margin-right: .4em; padding: 0 .4em; color: #7f7f7f; }
.chroma .line { display: flex; }
.chroma .k  { color: #ff79c6; }
.chroma .kc { color: #ff79c6; }
.chroma .kd { color: #8be9fd; font-style: italic; }
.chroma .kn { color: #ff79c6; }
.chroma .kp { color: #ff79c6; }
.chroma .kr { color: #ff79c6; }
.chroma .kt { color: #8be9fd; }
.chroma .na { color: #50fa7b; }
.chroma .nb { color: #8be9fd; font-style: italic; }
.chroma .nc { color: #50fa7b; }
.chroma .nl { color: #8be9fd; font-style: italic; }
.chroma .nt { color: #ff79c6; }
.chroma .nv { color: #8be9fd; font-style: italic; }
.chroma .nf { color: #50fa7b; }
.chroma .fm { color: #50fa7b; }
.chroma .bp { font-style: italic; }
.chroma .vc,.chroma .vg,.chroma .vi,.chroma .vm { color: #8be9fd; font-style: italic; }
.chroma .s,.chroma .sa,.chroma .sb,.chroma .sc,.chroma .dl,.chroma .sd,
.chroma .s2,.chroma .se,.chroma .sh,.chroma .si,.chroma .sx,.chroma .sr,
.chroma .s1,.chroma .ss { color: #f1fa8c; }
.chroma .m,.chroma .mb,.chroma .mf,.chroma .mh,.chroma .mi,.chroma .il,
.chroma .mo { color: #bd93f9; }
.chroma .o,.chroma .ow { color: #ff79c6; }
.chroma .c,.chroma .ch,.chroma .cm,.chroma .c1,.chroma .cs { color: #6272a4; font-style: italic; }
.chroma .cp,.chroma .cpf { color: #ff79c6; }
.chroma .gd { color: #f55; }
.chroma .ge { text-decoration: underline; }
.chroma .gi { color: #50fa7b; font-weight: bold; }
.chroma .go { color: #44475a; }
.chroma .gh,.chroma .gu { font-weight: bold; }
.chroma .gl { text-decoration: underline; }

/* Code block wrapper from render hook */
.code .highlight { margin: 0; }
.code .highlight pre {
  margin: 0;
  padding: clamp(1rem, 3vw, 1.5rem);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  line-height: 1.7;
  background: var(--code-bg);
  color: var(--code-fg);
  tab-size: 4;
}

/* =================================================================
   Home
   ================================================================= */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding-block: clamp(3rem, 8vw, 5.5rem) 1rem;
}
@media (min-width: 680px) {
  .hero {
    grid-template-columns: minmax(0,1fr) var(--portrait-w, 22rem);
    align-items: stretch;
    gap: clamp(2.5rem, 6vw, 5rem);
  }
  .portrait { align-self: stretch; }
  .portrait img { height: 100%; aspect-ratio: auto; }
}
.page--home .hero__title { font-size: clamp(2.6rem, 7vw, 4rem); }
.page--home .hero__lead { max-width: 34rem; }
.hero__title {
  font-size: clamp(2.4rem, 6.5vw, 3.5rem);
  letter-spacing: -0.03em;
  line-height: 1.0;
}
.hero__lead {
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--fg-soft);
  margin-top: 1.6rem;
  max-width: 30rem;
}
.hero__lead + .hero__lead { margin-top: 1.1rem; }
.portrait {
  border: 1px solid var(--rule);
  line-height: 0;
}
.portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

/* contact row */
.contact {
  margin-top: 2.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem;
}
.contact a {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--fg-soft);
  display: inline-flex; align-items: baseline; gap: 0.5rem;
}
.contact a .label { color: var(--faint); }
.contact a:hover { color: var(--accent); }
.contact a:hover .label { color: var(--accent); }
.contact--stack { flex-direction: column; gap: 0.6rem; }
.contact--stack a { display: grid; grid-template-columns: 5rem 1fr; }

/* =================================================================
   Posts index — catalogue
   ================================================================= */
.index-head { padding-block: clamp(2.6rem, 6vw, 4rem) 0; max-width: var(--measure); margin-inline: auto; }
.index-head h1 {
  font-size: clamp(2.2rem, 6vw, 3rem);
  letter-spacing: -0.03em;
}
.index-head p { margin-top: 1rem; color: var(--muted); max-width: var(--measure); }

.post-list { margin-top: 2.4rem; border-top: 1px solid var(--rule); max-width: var(--measure); margin-inline: auto; }
.post-row {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 0 1.4rem;
  padding-block: 1.9rem;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
}
.post-row__idx {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--faint);
  padding-top: 0.45rem;
}
.post-row__meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: baseline;
  margin-bottom: 0.55rem;
}
.post-row__date { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em; color: var(--muted); }
.cat {
  font-family: var(--font-mono);
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 3px;
  padding: 0.05rem 0.45rem;
  text-decoration: none;
}
a.cat:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.post-row__title {
  font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.12;
  color: var(--fg);
  transition: color .15s ease;
}
.post-row:hover .post-row__title { color: var(--accent); }
.post-row__excerpt { margin-top: 0.7rem; color: var(--muted); max-width: var(--measure); font-size: 1rem; }
.post-row__more {
  margin-top: 0.9rem;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.post-row__more::after { content: "\2192"; transition: transform .15s ease; }
.post-row:hover .post-row__more::after { transform: translateX(3px); }

@media (max-width: 560px) {
  .post-row { grid-template-columns: 1fr; gap: 0; }
  .post-row__idx { padding-top: 0; margin-bottom: 0.6rem; }
}

/* =================================================================
   Article header
   ================================================================= */
.article-head { padding-block: clamp(2.6rem, 6vw, 4rem) 0; max-width: var(--measure); margin-inline: auto; }
.article-head h1 {
  font-size: clamp(2rem, 5.2vw, 2.9rem);
  letter-spacing: -0.028em;
  margin-top: 1rem;
}
.article-meta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.5rem 1.5rem;
  margin-top: 1.3rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
}
.article-meta__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.article-meta__date { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em; color: var(--muted); white-space: nowrap; }
.article-body { margin-top: 2.4rem; }

.article-foot {
  margin-top: 5rem; padding-top: 2rem; border-top: 1px solid var(--rule);
  max-width: var(--measure);
  margin-inline: auto;
}
.article-foot__nav { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: 0.5rem; }
.article-foot__nav a {
  text-decoration: none;
  color: var(--fg-soft);
  max-width: 18rem;
  padding: 1rem 1.1rem;
  border: 1px solid transparent;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.article-foot__nav a:hover { color: var(--fg); background: var(--bg-tint); border-color: var(--rule); }
.article-foot__nav .label { display: block; transition: transform .18s ease; }
.article-foot__nav .prev:hover .label { transform: translateX(-3px); }
.article-foot__nav .next:hover .label { transform: translateX(3px); }
.article-foot__nav .t { font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.article-foot__nav .next { text-align: right; margin-left: auto; }

/* utility */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}