/* ============================================================================
   Brendon Chikavanga — personal site (v8: dark mode + generative network bg)

   Theme: dark only, no toggle.
     --bg          deep warm near-black (#1a1815)
     --ink         warm off-white (#e8e3d8)
     --accent      muted warm amber (#d4a574)
     italics       same as body color (warm off-white)

   Layout:
     - Body is a 700px column, centred. The network canvas sits behind everything.
     - Each content block (header, .bio, .writing, .site-footer, .colophon) gets
       its own background at 95% opacity so the network is suppressed where text
       sits and visible in the gaps between blocks.
   ============================================================================ */

@font-face {
  font-family: "et-book";
  src: url("https://cdn.jsdelivr.net/gh/edwardtufte/et-book@gh-pages/et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff") format("woff");
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "et-book";
  src: url("https://cdn.jsdelivr.net/gh/edwardtufte/et-book@gh-pages/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff") format("woff");
  font-weight: normal; font-style: italic; font-display: swap;
}
@import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;1,400&family=JetBrains+Mono:wght@400&display=swap");

:root {
  --serif: "et-book", "Crimson Pro", Cambria, serif;
  --mono:  "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --bg:        #1a1815;
  --bg-card:   transparent;
  --ink:       #e8e3d8;
  --ink-soft:  #a09a8a;
  --ink-faint: #6e6a5d;
  --rule:      #2e2a23;

  --accent:    #d4a574;                  /* muted warm amber */
  --accent-underline: rgba(212, 165, 116, 0.45);

  --measure:      700px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { min-height: 100dvh; background: var(--bg); }

/* ----------------------------------------------------------------------------
   Page background — soft amber bloom + SVG-turbulence grain.
   Painted on the html element via layered backgrounds. No JS, no canvas.
   The grain is a 200×200 tiled SVG noise pattern at low alpha; the bloom is
   a single off-center radial gradient. Together they read as warm-paper
   texture under the type, not as a webby "particle background".
   ---------------------------------------------------------------------------- */
html {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 70% 55% at 22% 18%, rgba(212, 165, 116, 0.10), transparent 70%),
    radial-gradient(ellipse 60% 50% at 85% 90%, rgba(212, 165, 116, 0.06), transparent 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.831  0 0 0 0 0.647  0 0 0 0 0.455  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.32'/></svg>");
  background-repeat: no-repeat, no-repeat, repeat;
  background-attachment: fixed, fixed, fixed;
  background-size: auto, auto, 220px 220px;
}

html {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ----------------------------------------------------------------------------
   Background motion canvas — drifting amber points, sits on top of the
   CSS bloom/grain and beneath the prose.
   ---------------------------------------------------------------------------- */
#bg-motion {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
}

body {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 56px 28px 56px;
  min-height: 100dvh;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 28px;
  text-align: left;
}
body.post-host { max-width: 1240px; }

/* Body is a transparent column on top of the full-viewport canvas.
   The flow field is visible across the entire page; we keep the field
   readable behind text by holding stroke alpha low rather than by hiding
   the canvas behind opaque cards. */
body > header,
body > section,
body > footer,
body > p.colophon,
body > .post-column {
  position: relative;
  background: transparent;
  padding: 0;
}
body > header { padding-top: 0; padding-bottom: 4px; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent-underline);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-color: var(--accent); }

em, i { color: var(--ink); font-style: italic; }

/* ----------------------------------------------------------------------------
   Header
   ---------------------------------------------------------------------------- */
.name {
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.012em;
  margin: 0;
  color: var(--ink);
}

/* ----------------------------------------------------------------------------
   Section header — italic ET Book
   ---------------------------------------------------------------------------- */
.section-h {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  color: var(--ink);
  margin: 0 0 14px;
}

/* ----------------------------------------------------------------------------
   Bio — serif paragraph with drop cap.
   ---------------------------------------------------------------------------- */
.bio {
  font-size: 19px;
  line-height: 1.6;
  text-wrap: pretty;
}
.bio p { margin: 0 0 0.9em; }
.bio p:last-of-type { margin: 0; }

/* Drop cap — explicit <span class="dropcap"> wrapper to avoid ::first-letter
   pulling trailing punctuation in. Amber, italic. */
.bio .dropcap {
  font-family: var(--serif);
  font-style: italic;
  font-size: 3.4em;
  line-height: 0.9;
  float: left;
  margin: 0.05em 0.08em 0 -0.04em;
  color: var(--accent);
  font-feature-settings: "onum" 1;
}

.now-link {
  display: block;
  font-size: 15px;
  color: var(--ink-faint);
  margin-top: 18px;
  font-family: var(--serif);
}
.now-link a { color: var(--ink-soft); text-decoration-color: rgba(160, 154, 138, 0.3); }
.now-link a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.now-meta {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
  margin: 6px 0 0;
}

/* ----------------------------------------------------------------------------
   Writing list
   ---------------------------------------------------------------------------- */
.writing ol {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 22px;
}
.writing li { line-height: 1.4; }
.post-title {
  display: inline;
  font-family: var(--serif);
  font-size: 20px;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent-underline);
}
.post-title:hover { text-decoration-color: var(--accent); }
.post-meta {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ink-soft);
  font-variant-numeric: oldstyle-nums;
  margin-left: 8px;
  letter-spacing: 0.01em;
}
.post-blurb {
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink);
  opacity: 0.78;
  margin: 4px 0 0;
  max-width: 64ch;
  text-wrap: pretty;
}

/* ----------------------------------------------------------------------------
   Footer — labelled rows.
   ---------------------------------------------------------------------------- */
.site-footer {
  font-size: 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.site-footer .row { line-height: 1.5; }
.site-footer .label {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  margin-right: 6px;
}

/* ----------------------------------------------------------------------------
   Colophon
   ---------------------------------------------------------------------------- */
.colophon {
  font-size: 12.5px;
  color: var(--ink-faint);
  font-style: italic;
  font-family: var(--serif);
  letter-spacing: 0.01em;
  margin: 0;
}

/* ----------------------------------------------------------------------------
   Post page
   ---------------------------------------------------------------------------- */
.post-column { max-width: 720px; margin: 0 auto; counter-reset: sidenote-counter; }
article.post {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.6;
}
article.post .post-h1 {
  font-size: 36px;
  line-height: 1.15;
  margin: 0 0 10px;
  letter-spacing: -0.012em;
  text-wrap: balance;
  font-weight: 400;
  color: var(--ink);
}
article.post .post-date {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ink-soft);
  font-variant-numeric: oldstyle-nums;
  letter-spacing: 0.02em;
  margin: 0 0 28px;
}
article.post .tldr {
  font-style: italic;
  font-size: 18px;
  line-height: 1.55;
  border-left: 2px solid var(--rule);
  padding: 2px 0 2px 18px;
  margin: 0 0 36px;
  max-width: 60ch;
  color: var(--ink);
}
article.post .body p { margin: 0 0 1.1em; text-wrap: pretty; }
article.post .body h2 { font-style: italic; font-size: 24px; margin: 40px 0 14px; line-height: 1.2; font-weight: 400; color: var(--ink); }
article.post .body h3 { font-size: 20px; margin: 30px 0 10px; font-style: italic; font-weight: 400; color: var(--ink); }
article.post .body code {
  font-family: var(--mono);
  font-size: 0.85em;
  background: rgba(255,255,255,0.05);
  padding: 1px 5px;
  border-radius: 3px;
}
article.post .body pre {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.55;
  background: #211e19;
  border: 1px solid var(--rule);
  padding: 14px 16px;
  overflow-x: auto;
  margin: 22px 0;
  border-radius: 2px;
}
article.post .body pre code { background: transparent; padding: 0; font-size: inherit; }
article.post .body blockquote {
  margin: 22px 0;
  padding-left: 18px;
  border-left: 2px solid var(--rule);
  opacity: 0.82;
  font-style: italic;
}
article.post .post-end {
  margin-top: 56px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: 15px;
}
article.post .post-end a { color: var(--ink-soft); text-decoration-color: transparent; }
article.post .post-end a:hover { color: var(--accent); }

/* Tufte-style sidenotes */
.sidenote, .marginnote {
  float: right;
  clear: right;
  margin-right: -38%;
  width: 32%;
  margin-top: 0.2em;
  margin-bottom: 1em;
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
  opacity: 0.78;
  position: relative;
}
.sidenote-number { counter-increment: sidenote-counter; }
.sidenote-number::after, .sidenote::before { font-family: var(--serif); position: relative; vertical-align: baseline; }
.sidenote-number::after { content: counter(sidenote-counter); font-size: 0.7em; top: -0.5em; left: 0.1em; color: var(--accent); }
.sidenote::before { content: counter(sidenote-counter) " "; font-size: 0.85em; top: -0.5em; color: var(--accent); margin-right: 2px; }
input.margin-toggle { display: none; }
label.sidenote-number { display: inline; cursor: pointer; }
label.margin-toggle:not(.sidenote-number) { display: none; }
@media (max-width: 1000px) {
  label.margin-toggle:not(.sidenote-number) { display: inline; cursor: pointer; color: var(--accent); }
  .sidenote, .marginnote { display: none; }
  .margin-toggle:checked + .sidenote, .margin-toggle:checked + .marginnote {
    display: block; float: left; clear: both; width: 95%;
    margin: 1em 2.5%; padding: 8px 12px;
    background: rgba(255,255,255,0.04); border-left: 2px solid var(--rule);
  }
}

/* Now page */
.now-page h1 {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 400;
  margin: 0 0 22px;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.now-page .now-body { font-size: 18px; line-height: 1.6; margin: 0 0 36px; text-wrap: pretty; }
.now-page .back { margin-top: 48px; font-size: 15px; font-family: var(--serif); }
.now-page .back a { color: var(--ink-soft); text-decoration-color: transparent; }
.now-page .back a:hover { color: var(--accent); }

::selection { background: rgba(212, 165, 116, 0.4); color: var(--ink); }

@media (max-width: 540px) {
  body { padding: 36px 16px 56px; gap: 12px; }
  body > header, body > section, body > footer, body > p.colophon { padding: 14px 16px; }
  .name { font-size: 30px; }
  .section-h { font-size: 22px; }
}