/* ── Design tokens ──────────────────────────────────────────────── */

:root {
  color-scheme: light dark;  /* native scrollbars/forms follow the theme */

  --bg:     #f5edda;         /* warm beige-yellow  */
  --ink:    #322e27;         /* warm near-black    */
  --muted:  #9a917d;         /* faded warm grey    */
  --line:   #d9cdb0;         /* divider tone       */
  --accent: #1a66ff;         /* bright blue */
  --accent-hover: #0a4fd0;
  --soft:    #5f594c;        /* secondary prose    */
  --soft-2:  #6b6456;        /* entry descriptions */
  --brand-ink: #534d40;      /* navbar wordmark    */
  --code-bg: #ece2c8;
  --radius: 0.75rem;         /* rounded corners on media & code */

  --glow-core: rgba(26, 102, 255, 0.38);
  --glow-halo: rgba(26, 102, 255, 0.20);

  --photo-blend: multiply;   /* melts the photo into the light bg */
  --photo-opacity: 0.8;

  /* pixel flowers */
  --fl-blue:  #1a66ff;
  --fl-clay:  #b3593c;
  --fl-amber: #d9a45f;
  --fl-stem:  #7d8a52;
  --fl-ink:   #5a5244;

  /* syntax highlighting */
  --hl-comment: #9a8f73;
  --hl-keyword: #a8442a;
  --hl-string:  #5f7138;
  --hl-number:  #9a6a2f;
  --hl-title:   #45607a;
  --hl-var:     #6b5b3e;

  --serif: Georgia, Cambria, "Times New Roman", Times, serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --width:  60ch;            /* paragraph measure ≈ 60 characters (ideal 50–75) */
  --gutter: 1rem;
}

/* Dark mode — synced with the system theme. Same warm character, inverted. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:     #1e1b15;       /* warm near-black    */
    --ink:    #e9e2d2;       /* warm off-white     */
    --muted:  #877f6c;
    --line:   #3b362a;
    --accent: #6b9fff;       /* lighter blue for contrast on dark */
    --accent-hover: #93b7ff;
    --soft:    #b3ab99;
    --soft-2:  #a29a87;
    --brand-ink: #c7c0ae;
    --code-bg: #2b2720;

    --glow-core: rgba(64, 120, 255, 0.28);
    --glow-halo: rgba(64, 120, 255, 0.14);

    /* multiply would crush the photo on a dark bg — plain transparency */
    --photo-blend: normal;
    --photo-opacity: 0.85;

    --fl-blue:  #6b9fff;
    --fl-clay:  #cf7e5e;
    --fl-amber: #d9a45f;
    --fl-stem:  #8a9a64;
    --fl-ink:   #c7c0ae;

    --hl-comment: #7e7560;
    --hl-keyword: #e0795a;
    --hl-string:  #a8bd72;
    --hl-number:  #d9a45f;
    --hl-title:   #82a7cc;
    --hl-var:     #b5a685;
  }

}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;        /* smooth jumps to TOC anchors */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);   /* serif for reading body */
  font-size: 1rem;
  line-height: 1.65;
  overflow-x: hidden;        /* clip the full-bleed rules' overflow */
}

/* Home: a large glow radiating from the top of the page, fading down as you
   scroll. Anchored to the document top (position 0) and fading to transparent,
   so there's no solid-bg seam — avoids the iOS Safari bottom-viewport issue. */
body.home {
  background-color: var(--bg);
  background-image:
    radial-gradient(85% 55% at 50% -25%, var(--glow-core), transparent 60%),
    radial-gradient(150% 95% at 50% -20%, var(--glow-halo), transparent 70%);
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100% 90vh;
}


/* ── Column: left-biased, not centered ──────────────────────────── */

main {
  /* distance from the left edge — sits a touch left of centre on laptops.
     Uses vw (not %) so the same value resolves on descendants like <hr>. */
  --edge: max(var(--gutter), (100vw - var(--width)) * 0.35);
  width: min(var(--width), 100% - 2 * var(--gutter));
  margin-left: var(--edge);
  padding-block: 2.5rem 5rem;
}

/* Article pages stretch to the right edge: text stays left at the measure,
   the TOC is pushed to the far right gutter. */
main.post {
  --toc-w: 12rem;
  --toc-edge: clamp(1.5rem, 6vw, 7rem);   /* gap from the right viewport edge */
  width: min(100% - 2 * var(--gutter), calc(100vw - var(--edge) - var(--toc-edge)));
}

@media (max-width: 600px) {
  main {
    --edge: var(--gutter);
    width: 100%;
    margin-left: 0;
    padding-inline: var(--gutter);
  }
}


/* ── Top navbar: thin, hard left, full-width divider ────────────── */
/* scoped to the page-level bar so .toc / .links navs aren't affected */

body > nav {
  padding: 0.4rem 1rem;
  border-bottom: 1px solid var(--line);   /* divider, edge to edge */
  font-family: var(--sans);
}

.brand {
  font-size: 1rem;           /* same as body */
  color: var(--brand-ink);
  text-decoration: none;
}

.brand:hover { color: var(--ink); }

.crumb { color: var(--muted); }   /* greyed /article-name */


/* ── Article body + TOC layout ──────────────────────────────────── */

/* keep header text at the reading measure even though main is wider */
.post-head { max-width: var(--width); }

/* the post's flower, grown large in the left margin and planted at the
   base of the title — bottom-aligned so any height roots at the same line */
.post-flower { display: none; }

@media (min-width: 1024px) {
  .post-head { position: relative; }
  .post-flower {
    display: block;
    position: absolute;
    top: 0;                         /* aligned with the title's first line */
    right: calc(100% + 2rem);       /* in the left margin, just past the title */
  }
  .post-flower .flower {
    display: block;
    height: clamp(2.5rem, 7vw, 3.75rem);   /* same size as the title */
    width: auto;
  }
}

.post-grid {
  display: flex;
  justify-content: space-between;   /* body left, TOC far right */
  align-items: flex-start;
  gap: 2rem;
}

.post-body { width: min(var(--width), 100%); min-width: 0; }


/* ── Table of contents (sticky side rail, scroll-spy) ───────────── */

.toc {
  position: sticky;
  top: 5rem;                 /* sticks here once scrolled; starts below the rule */
  flex: none;
  width: var(--toc-w);
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
  font-family: var(--sans);
  font-size: 0.8rem;
  line-height: 1.4;
}

.toc-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  color: var(--muted);
  margin-bottom: 0.6rem;
}

.toc ul   { list-style: none; }
.toc li   { margin: 0.1rem 0; }
.toc-l3   { padding-left: 0.9rem; }

.toc a {
  display: block;
  padding: 0.12rem 0;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s;
}

.toc a:hover    { color: var(--ink); }
.toc a.active   { color: var(--accent); }

@media (max-width: 1024px) {
  .toc { display: none; }     /* not enough side room — hide */
  main.post { width: min(var(--width), 100% - 2 * var(--gutter)); }
}

@media (max-width: 600px) {
  main.post { width: 100%; }  /* full width — equal 1rem margins like other pages */
}


/* ── Type: serif body, sans for titles & UI ─────────────────────── */

h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.25;
}


/* ── Home: full-width split — masthead left, index right ────────── */

main.home {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0 1rem;            /* horizontal inset matches the navbar */
  display: grid;
  grid-template-columns: minmax(15rem, 21rem) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

@media (max-width: 760px) {
  main.home {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 0 1rem;
  }
}

/* masthead (left): full-height sticky panel — title top, links bottom */
.masthead {
  display: flex;
  flex-direction: column;
  /* right gap (to divider) = left gap (page edge, from main.home's 1rem),
     so text and photo are evenly spaced on both sides */
  padding: 2.75rem 1rem 2.75rem 0;
  border-right: 1px solid var(--line);   /* full-height divider */
}

.masthead h1 {
  font-size: 2.4rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 1.75rem;     /* more breathing room under the title */
}

.masthead p {
  max-width: none;            /* paragraphs fill the masthead, wider than the title */
  color: var(--soft);
  font-size: 0.95rem;
  line-height: 1.55;
}

.masthead p + p { margin-top: 0.85rem; }

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin-top: auto;          /* anchor links to the bottom of the panel */
  padding-top: 2rem;
  font-family: var(--sans);
  font-size: 0.85rem;
}

.masthead-photo {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 1.75rem;        /* sits above the title now */
  border-radius: var(--radius);
  opacity: var(--photo-opacity);
  mix-blend-mode: var(--photo-blend);   /* blends into the background */
}

.links a { color: var(--muted); text-decoration: none; transition: color 0.15s; }
.links a:hover { color: var(--accent); }

@media (max-width: 760px) {
  .masthead {
    min-height: 0;
    padding: 2.5rem 0 1.5rem;
    border-right: 0;
    position: relative;
  }
  .masthead::after {                        /* separator, edge to edge */
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 100vw;
    height: 1px;
    background: var(--line);
  }
  .links { margin-top: 1.25rem; padding-top: 0; }

  /* On mobile the glow sits under the masthead — a full-bleed pseudo-element
     anchored to the top of the index, behind its content (can't touch the
     masthead). rem-sized so iOS Safari's dynamic viewport can't seam it. */
  body.home { background-image: none; }
  .index { padding-top: 1.75rem; position: relative; }
  .index::before {
    content: "";
    position: absolute;
    top: -2rem;                /* = the grid gap, so it starts at the separator */
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 30rem;
    z-index: -1;
    pointer-events: none;
    background:                /* same gradient as desktop → same lightness */
      radial-gradient(85% 55% at 50% -25%, var(--glow-core), transparent 60%),
      radial-gradient(150% 95% at 50% -20%, var(--glow-halo), transparent 70%);
    background-repeat: no-repeat;
  }
}

/* Laptop+: lock the page to one screen. The whole content area is the
   scroller, with the masthead pinned — so scrolling anywhere (including
   over the masthead) moves the article list. */
@media (min-width: 761px) {
  body.home {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  body.home main.home {       /* the single scroller */
    flex: 1;
    min-height: 0;
    display: flex;            /* override the grid */
    align-items: flex-start;
    gap: 3rem;               /* fixed: index column absorbs all width change */
    overflow-y: auto;
  }

  body.home .masthead {       /* pinned, fills the viewport height */
    position: sticky;
    top: 0;
    flex: 0 0 30vw;           /* width scales with viewport; gaps stay fixed */
    height: 100%;
    overflow-y: auto;        /* scroll its own content if it can't fit (e.g. zoomed in) */
  }

  body.home .index { flex: 1; }
}

/* index (right) */
.index { padding: 2.75rem 0 4rem; }      /* top aligns with masthead title */

.index-empty {
  color: var(--muted);
  font-style: italic;
  line-height: 1.7;
}

.year { margin-bottom: 2.25rem; }

.year-label {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.post-list { list-style: none; }
.post-list li { margin-bottom: 1.1rem; }

.post-list a {
  display: grid;
  grid-template-columns: 4rem 1.5rem 1fr;   /* date | flower | title+desc */
  column-gap: 1.25rem;
  max-width: 44rem;
  text-decoration: none;
  color: var(--ink);
}

/* each post's seeded pixel flower */
.entry-flower { padding-top: 0.2rem; }

.entry-flower .flower {
  display: block;
  max-width: 1.5rem;
  height: 1.7rem;
  width: auto;
  margin-inline: auto;
}

/* sprite-sheet animation: static on frame 0; the 4-frame loop
   (petal glints, leaf flutter) only runs while hovered */
.flower .fr  { visibility: hidden; }
.flower .fr0 { visibility: visible; animation-delay: var(--ph, 0s); }
.flower .fr1 { animation-delay: calc(var(--ph, 0s) + 0.45s); }
.flower .fr2 { animation-delay: calc(var(--ph, 0s) + 0.9s); }
.flower .fr3 { animation-delay: calc(var(--ph, 0s) + 1.35s); }

.post-list a:hover .flower .fr,
.post-flower:hover .flower .fr {
  animation-name: flower-frame;
  animation-duration: 1.8s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}

@keyframes flower-frame {
  0%  { visibility: visible; }
  25% { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .flower, .flower .fr { animation: none !important; }
}

.entry-date {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 0.28rem;       /* optical align with title */
}

.entry-title {
  font-family: var(--sans);
  font-weight: 600;
}

.post-list a:hover .entry-title { color: var(--accent); }

.entry-desc {
  grid-column: 3;
  margin-top: 0.15rem;
  color: var(--soft-2);
  font-size: 0.95rem;
  line-height: 1.45;
}

/* ── Article ────────────────────────────────────────────────────── */

article h1 {
  font-size: clamp(2.5rem, 7vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}
article h2 { font-size: 1.1rem;  margin: 1.75rem 0 0.5rem; }
article h3 { font-size: 1rem; font-style: italic; margin: 1.4rem 0 0.4rem; }

/* breathing room when jumping to an anchor */
article h2[id], article h3[id] { scroll-margin-top: 1.5rem; }

.post-date {
  display: block;
  margin-bottom: 1rem;
  font-family: var(--sans);
  color: var(--muted);
  font-size: 0.85rem;
}

/* lead paragraph */
.post-intro {
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--soft);
}

/* full-width separator under the article header (left to right) */
.post-rule {
  border: 0;
  height: 1px;
  background: var(--line);
  width: 100vw;
  margin: 1.75rem 0 2rem calc(-1 * var(--edge));
}

article p              { margin-bottom: 1.15rem; }
article ul, article ol { padding-left: 1.4rem; margin-bottom: 1.15rem; }
article li             { margin-bottom: 0.25rem; }

article a            { color: var(--accent); text-underline-offset: 2px; }
article a:hover      { color: var(--accent-hover); }

article img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.75rem 0;
  border-radius: var(--radius);
}

/* LaTeX-style figures with auto-numbered captions */
article          { counter-reset: figure; }
article figure   { counter-increment: figure; margin: 2rem 0; }
article figure img { margin: 0; }

article figcaption {
  margin-top: 0.5rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--muted);
}

article figcaption::before {
  content: "Fig. " counter(figure) " — ";
  color: var(--ink);
}

article blockquote {
  margin: 1.5rem 0;
  padding-left: 1.1rem;
  border-left: 2px solid var(--line);
  color: var(--soft);
  font-style: italic;
}

article hr {
  border: 0;
  height: 1px;
  background: var(--line);
  margin: 2.5rem 0;          /* stays within the column */
}

code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.875em;
  background: var(--code-bg);
  padding: 0.1em 0.35em;
  border-radius: 0.3rem;
}

pre {
  margin: 1.5rem 0;
  padding: 1rem 1.15rem;
  background: var(--code-bg);
  border-radius: var(--radius);
  overflow-x: auto;
  line-height: 1.5;
}

pre code { background: none; padding: 0; font-size: 0.85rem; }

/* math (KaTeX): inherit ink color; wide display equations scroll, not overflow */
.katex { color: var(--ink); }
.katex-display { overflow-x: auto; overflow-y: hidden; padding: 0.3rem 0; }


/* ── Syntax highlighting (highlight.js classes), warm theme ─────── */

.hljs                                          { color: var(--ink); }
.hljs-comment, .hljs-quote                     { color: var(--hl-comment); font-style: italic; }
.hljs-keyword, .hljs-selector-tag,
.hljs-literal, .hljs-type, .hljs-name          { color: var(--hl-keyword); }
.hljs-string, .hljs-regexp, .hljs-addition     { color: var(--hl-string); }
.hljs-number, .hljs-built_in,
.hljs-attr, .hljs-attribute                    { color: var(--hl-number); }
.hljs-title, .hljs-title.function_,
.hljs-section                                  { color: var(--hl-title); }
.hljs-variable, .hljs-template-variable,
.hljs-params                                   { color: var(--hl-var); }
.hljs-meta                                     { color: var(--hl-comment); }
.hljs-deletion                                 { color: var(--accent); }
.hljs-emphasis                                 { font-style: italic; }
.hljs-strong                                   { font-weight: 600; }