/* ============================================================
   restyle.css — Warm Study / Neutral charcoal redesign
   Loaded after the PaperMod theme CSS (via extra_head.html).
   ============================================================ */

/* ---- self-hosted fonts ---- */
@font-face { font-family:'EB Garamond'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/eb-garamond-400.woff2') format('woff2'); }
@font-face { font-family:'EB Garamond'; font-style:italic; font-weight:400; font-display:swap; src:url('/fonts/eb-garamond-400-italic.woff2') format('woff2'); }
@font-face { font-family:'EB Garamond'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/eb-garamond-500.woff2') format('woff2'); }
@font-face { font-family:'EB Garamond'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/eb-garamond-600.woff2') format('woff2'); }
@font-face { font-family:'League Spartan'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/league-spartan-500.woff2') format('woff2'); }
@font-face { font-family:'League Spartan'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/league-spartan-600.woff2') format('woff2'); }
@font-face { font-family:'League Spartan'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/league-spartan-700.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/jetbrains-mono-400.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/jetbrains-mono-500.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/jetbrains-mono-600.woff2') format('woff2'); }

/* ---- design tokens: light (Warm Study) ---- */
:root {
  --theme:        #faf5ec;   /* page background */
  --entry:        #fffdf6;   /* cards / elevated surfaces */
  --primary:      #2a2017;   /* headings, strong text */
  --content:      #33291f;   /* body prose */
  --secondary:    #796c59;   /* meta, muted — darkened to 4.71:1 on --theme for WCAG AA */
  --tertiary:     #efe6d6;   /* subtle fills, hover */
  --code-bg:      #f4ecdd;   /* code panel */
  --hljs-bg:      #f4ecdd;   /* PaperMod paints `pre code` with this (!important) */
  --border:       #e7dac4;
  --radius:       10px;
  /* new semantic tokens */
  --accent:       #b04321;   /* terracotta — darkened to 5.27:1 on --theme for WCAG AA */
  --accent-ink:   #a8451f;   /* inline-code text */
  --code-in-bg:   #efe5d3;   /* inline-code background */
  --code-fg:      #463524;   /* plain code text (non-highlighted) — matches syntax.css base */
  --marginalia:   #756a56;   /* sidenote text — darkened to 4.89:1 on --theme for WCAG AA */
}

/* ---- design tokens: dark (Neutral charcoal) ---- */
.dark {
  --theme:        #16181c;
  --entry:        #1d2026;
  --primary:      #f1f3f6;
  --content:      #dde0e5;
  --secondary:    #8b909a;
  --tertiary:     #23262e;
  --code-bg:      #1d2026;
  --hljs-bg:      #1d2026;
  --border:       #2c303a;
  --accent:       #e0764a;
  --accent-ink:   #ef9d6f;
  --code-in-bg:   #23262e;
  --code-fg:      #e4e9f1;
  --marginalia:   #8b909a;
}

/* ---- base fonts ---- */
body { font-family:'EB Garamond', Georgia, serif; }
h1,h2,h3,h4,h5,h6,
.post-title, .entry-header, .page-header h1,
.logo a, #menu, .nav, .footer { font-family:'League Spartan', system-ui, sans-serif; }
code, pre, kbd, .post-content code, .post-content pre { font-family:'JetBrains Mono', ui-monospace, monospace; }

/* ---- reading typography ---- */
.post-content { color:var(--content); font-size:20px; line-height:1.66; }
.post-content p { margin:0 0 1.05em; }
.post-content h1,.post-content h2,.post-content h3,.post-content h4 {
  color:var(--primary); letter-spacing:-0.01em; line-height:1.15; }
.post-content h2 { font-size:1.55rem; margin:1.7em 0 .5em; }
.post-content h3 { font-size:1.25rem; margin:1.5em 0 .4em; }
.post-title { letter-spacing:-0.015em; }

/* links: terracotta, restrained underline on hover */
.post-content a { color:var(--accent); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.post-content a:hover { border-bottom-color:var(--accent); }

/* blockquote: a quiet left rule */
.post-content blockquote { border-left:3px solid var(--accent); margin:1.3em 0; padding:.1em 0 .1em 1.1em; color:var(--secondary); font-style:italic; }

/* lists: comfortable spacing */
.post-content ul,.post-content ol { padding-left:1.3em; }
.post-content li { margin:.25em 0; }

/* inline code (not inside <pre>) */
.post-content :not(pre) > code { background:var(--code-in-bg); color:var(--accent-ink); padding:.08em .36em; border-radius:4px; font-size:.82em; }

/* code panel: keep rounded corners (was in override.css) */
.post-content pre { background:var(--code-bg); color:var(--code-fg); border:1px solid var(--border); border-radius:var(--radius); padding:16px 20px; line-height:1.62; }
/* override PaperMod's `.post-content pre code { color:#d5d5d6 }` (a light grey for its
   dark panel) so tokens our syntax CSS doesn't colour use the mode-aware base instead */
.post-content pre code { color:var(--code-fg); }

/* ---- margin sidenotes (Markdown footnotes, pure CSS) ---- */
/* footnote reference superscript */
.post-content .footnote-reference a { color:var(--accent); text-decoration:none; border:0; font-weight:600; padding:0 .15em; }

/* default (narrow / no :has support): inline aside */
.post-content .footnote-definition {
  margin:1.1em 0; padding:.1em 0 .1em 1em;
  border-left:2px solid var(--accent);
  color:var(--marginalia); font-size:.92rem; line-height:1.45;
}
.post-content .footnote-definition p { display:inline; margin:0; }
.post-content .footnote-definition-label { color:var(--accent); font-weight:600; }

/* narrow / mobile: notes are defined BEFORE their paragraph (so the wide-screen
   float can top-align them). On narrow that would put the note before its text,
   so collect all notes at the bottom of the article instead (classic mobile
   footnotes) by ordering them last in a flex column. */
@media (max-width:1079.98px) {
  .post-content { display:flex; flex-direction:column; }
  .post-content > .footnote-definition { order:1; margin-top:1.4em; }
}

/* wide screens: float each note into a right gutter beside its paragraph */
@media (min-width:1080px) {
  .main:has(.post-single) { max-width:960px; }
  /* prose stays at a comfortable reading measure; the note gutter sits just to its right */
  .post-content > p,
  .post-content > ul, .post-content > ol,
  .post-content > h1, .post-content > h2, .post-content > h3, .post-content > h4,
  .post-content > blockquote { max-width:680px; }
  /* code, tables and figures break out to the full content width (~90 cols).
     `clear:right` means a code block never overlaps a floated sidenote — in the
     rare case they'd collide, the code simply starts below the note. */
  .post-content > pre,
  .post-content > figure,
  .post-content > table { max-width:none; clear:right; }
  .post-content { position:relative; }
  .post-content .footnote-definition {
    float:right; clear:right;
    width:200px; margin:.2em 0 1em; padding:0;
    border-left:0; font-style:normal;
  }
  .post-content .footnote-definition::before {
    content:""; display:block; width:26px; height:2px; background:var(--accent); margin-bottom:8px;
  }
}

/* print: notes inline, no float */
@media print {
  .post-content .footnote-definition { float:none; width:auto; border-left:2px solid #999; padding-left:1em; }
}

/* ---- header / nav ---- */
.nav { border-bottom:1px solid var(--border); }
.logo a { font-weight:700; letter-spacing:-0.01em; color:var(--primary); }
#menu a { color:var(--secondary); }
#menu a:hover, #menu a.active { color:var(--accent); }

/* ---- home / list entries ---- */
.first-entry .entry-header h1, .post-entry .entry-header h2 { font-family:'League Spartan', sans-serif; letter-spacing:-0.01em; }
.post-entry { background:var(--entry); border:1px solid var(--border); border-radius:var(--radius); transition:border-color .15s ease; }
.post-entry:hover { border-color:var(--accent); }
.post-meta, .archive-meta, .archive-count { color:var(--secondary); font-family:'League Spartan', sans-serif; }
.entry-content { color:var(--content); font-family:'EB Garamond', serif; }

/* ---- tags ---- */
.terms-tags a, .post-tags a { background:var(--tertiary); color:var(--primary); border-radius:var(--radius); }
.terms-tags a:hover, .post-tags a:hover { color:var(--accent); }

/* ---- footer ---- */
.footer { color:var(--secondary); border-top:1px solid var(--border); }
.footer a { color:var(--accent); }

/* ---- search box (supersedes override.css; results reuse .post-entry, styled above) ---- */
#searchbox input { background-color:var(--entry); color:var(--content); border:1px solid var(--border); border-radius:var(--radius); }