/* ============================================================
   Following the Brush — publish.css
   Obsidian Publish stylesheet. Place in the VAULT ROOT
   (same level as the folders). Publish uploads it with the site.

   Publish does NOT load your Minimal theme or your .obsidian
   snippets, so this file recreates the warm-paper, single-column
   look for the public site. Palette carried over from your
   vault-palette.css so the blog reads as an extension of your
   Obsidian, not a stranger.

   Reference in feel: Nick Cave's The Red Hand Files — one quiet
   column, serif prose, generous air, almost no chrome.

   PALETTE (your vault hues)
     paper   warm cream ground
     ink     #2b2621  body text
     muted   #6f665c  metadata, captions
     teal    #2c6a66  links (internal + external), like your vault
     rust    #9c4a20  italics — your own voice
     stone   122,112,96  quotation, quiet scaffolding
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@400;500&display=swap');

/* ------------------------------------------------------------
   1. Tokens — set on body so Publish's variables cascade
   ------------------------------------------------------------ */
body {
  --paper:        #f7f3ea;   /* warm cream — nudge to match your vault exactly */
  --paper-sunk:   #f1ebde;   /* faint panel (nav, code) */
  --ink:          #2b2621;
  --ink-muted:    #6f665c;
  --ink-faint:    #938a7d;
  --teal:         #2c6a66;
  --teal-hover:   #1d4f4b;
  --rust:         #9c4a20;
  --rule:         #e2dccc;   /* hairlines */

  --measure:      40rem;     /* reading column. You read wide in Obsidian;
                                a public diary reads better narrower — say so
                                and I'll widen it. */

  /* Map onto Obsidian's own variables */
  --background-primary:        var(--paper);
  --background-primary-alt:     var(--paper);
  --background-secondary:      var(--paper-sunk);
  --background-secondary-alt:  var(--paper-sunk);
  --text-normal:               var(--ink);
  --text-muted:                var(--ink-muted);
  --text-faint:                var(--ink-faint);
  --text-accent:               var(--teal);
  --text-accent-hover:         var(--teal-hover);
  --interactive-accent:        var(--rust);
  --text-selection:            rgba(156, 74, 32, 0.14);

  --font-text-theme: 'Lora', Georgia, 'Times New Roman', serif;
  --font-interface-theme: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --h1-color: var(--ink);
  --h2-color: var(--ink);
  --h3-color: var(--ink);

  background-color: var(--paper);
  color: var(--ink);
}

/* ------------------------------------------------------------
   2. The reading column & body type
   ------------------------------------------------------------ */
.published-container {
  background-color: var(--paper);
}

.markdown-preview-view,
.published-container .markdown-preview-view {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.09rem;
  line-height: 1.72;
  color: var(--ink);
  letter-spacing: 0.003em;
}

.markdown-preview-sizer {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 3.5rem 1.5rem 6rem;
}

.markdown-preview-view p {
  margin: 0 0 1.15em;
}

/* First line of a new section not indented; consecutive paragraphs
   get a gentle first-line indent, the way a printed book sets prose.
   Comment this block out for block-spaced paragraphs instead. */
.markdown-preview-view p + p {
  margin-top: -0.15em;
  text-indent: 1.3em;
}

/* ------------------------------------------------------------
   3. Headings — clean, no accent bars (as with Overnotes)
   ------------------------------------------------------------ */
.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3,
.markdown-preview-view h4 {
  font-family: 'Lora', Georgia, serif;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

.markdown-preview-view h1 {
  font-size: 2.15rem;
  font-weight: 500;
  margin: 0 0 1.6rem;
  letter-spacing: -0.01em;
}

/* Red Hand Files feel: to CENTRE the entry title and add a rule
   beneath it, uncomment this. Left off by default so section
   headings stay left-aligned and predictable. */
/*
.markdown-preview-sizer > h1:first-child {
  text-align: center;
  margin-bottom: 2.2rem;
}
.markdown-preview-sizer > h1:first-child::after {
  content: "";
  display: block;
  width: 3rem;
  height: 1px;
  background: var(--rust);
  margin: 1.1rem auto 0;
}
*/

.markdown-preview-view h2 {
  font-size: 1.5rem;
  margin: 2.6rem 0 0.9rem;
}

.markdown-preview-view h3 {
  font-size: 1.2rem;
  margin: 2.1rem 0 0.7rem;
  color: var(--ink-muted);
}

/* ------------------------------------------------------------
   4. Links & italics — your conventions
   ------------------------------------------------------------ */
.markdown-preview-view a,
.markdown-preview-view .internal-link,
.markdown-preview-view .external-link {
  color: var(--teal);
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 2.5px;
  text-decoration-color: rgba(44, 106, 102, 0.4);
  transition: color 0.12s ease, text-decoration-color 0.12s ease;
}
.markdown-preview-view a:hover {
  color: var(--teal-hover);
  text-decoration-color: var(--teal-hover);
}

/* Italics in rust — your own voice */
.markdown-preview-view em,
.markdown-preview-view i {
  color: var(--rust);
  font-style: italic;
}
/* but an italic that is itself a link stays a link */
.markdown-preview-view em a,
.markdown-preview-view a em {
  color: var(--teal);
}

.markdown-preview-view strong {
  font-weight: 600;
  color: var(--ink);
}

/* ------------------------------------------------------------
   5. Blockquote — stone, quiet, a held breath
   ------------------------------------------------------------ */
.markdown-preview-view blockquote {
  border-left: 2px solid rgba(122, 112, 96, 0.5);
  margin: 1.6em 0;
  padding: 0.1em 0 0.1em 1.4em;
  color: var(--ink-muted);
  font-style: italic;
}
.markdown-preview-view blockquote p { margin-bottom: 0.5em; }

/* ------------------------------------------------------------
   6. Callouts — your --acc system, ported and compact.
      Default stone; a handful of types mapped to your hues.
      (Finalised entries rarely carry callouts, but resonance
      notes and the odd aside will look at home.)
   ------------------------------------------------------------ */
.markdown-preview-view .callout {
  --acc: 122, 112, 96;                 /* stone default */
  background-color: rgba(var(--acc), 0.06);
  border: 1px solid rgba(var(--acc), 0.26);
  border-radius: 8px;
  padding: 0.6em 1em;
  margin: 1.5em 0;
  mix-blend-mode: normal;
}
.markdown-preview-view .callout .callout-title { color: rgb(var(--acc)); font-weight: 600; }
.markdown-preview-view .callout .callout-icon,
.markdown-preview-view .callout .callout-icon svg { color: inherit; stroke: currentColor; }

.markdown-preview-view .callout[data-callout="quote"],
.markdown-preview-view .callout[data-callout="cite"]        { --acc: 122, 112, 96; }
.markdown-preview-view .callout[data-callout="note"],
.markdown-preview-view .callout[data-callout="info"],
.markdown-preview-view .callout[data-callout="resonance"]   { --acc: 44, 106, 102; }  /* teal */
.markdown-preview-view .callout[data-callout="question"],
.markdown-preview-view .callout[data-callout="cue"]         { --acc: 109, 74, 107; }  /* plum */
.markdown-preview-view .callout[data-callout="tip"],
.markdown-preview-view .callout[data-callout="success"]     { --acc: 106, 133, 90; }  /* olive */
.markdown-preview-view .callout[data-callout="important"]   { --acc: 156, 74, 32; }   /* rust */

/* ------------------------------------------------------------
   7. Rules, lists, code, images
   ------------------------------------------------------------ */
.markdown-preview-view hr {
  border: none;
  height: 1px;
  background: var(--rule);
  margin: 2.8rem auto;
  width: 100%;
}

.markdown-preview-view ul,
.markdown-preview-view ol { padding-left: 1.3em; }
.markdown-preview-view li { margin: 0.25em 0; }

.markdown-preview-view code {
  font-size: 0.9em;
  background: var(--paper-sunk);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}
.markdown-preview-view pre {
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: 8px;
}

.markdown-preview-view img {
  max-width: 100%;
  border-radius: 4px;
}

/* Footnotes (where resonances land after finalising) — quiet */
.markdown-preview-view .footnotes {
  border-top: 1px solid var(--rule);
  margin-top: 3rem;
  padding-top: 1rem;
  font-size: 0.92rem;
  color: var(--ink-muted);
}

/* ------------------------------------------------------------
   8. Chrome — header, navigation, footer kept minimal
   ------------------------------------------------------------ */
.site-body-left-column {
  background: var(--paper);
  border-right: 1px solid var(--rule);
}
.site-name,
.site-body-left-column .site-name {
  font-family: 'Lora', Georgia, serif;
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.nav-folder-title,
.nav-file-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.86rem;
  color: var(--ink-muted);
  border-radius: 6px;
}
.nav-file-title:hover { background: var(--paper-sunk); color: var(--ink); }
.nav-file-title.is-active {
  background: rgba(156, 74, 32, 0.09);
  color: var(--rust);
  font-weight: 500;
}

/* search box in the left pane (readers navigate by search, as on Overnotes) */
.search-input-container input { font-family: 'Inter', sans-serif; }

/* Publish footer / "Powered by" — recede it */
.published-container .site-footer,
.markdown-preview-view .mod-footer { color: var(--ink-faint); font-family: 'Inter', sans-serif; font-size: 0.8rem; }

/* Right column (outline/graph): keep only if you want it; hairline it */
.site-body-right-column { border-left: 1px solid var(--rule); }

/* ------------------------------------------------------------
   9. Light-first, but don't break for a reader who flips to dark
   ------------------------------------------------------------ */
body.theme-dark {
  --paper:      #201d1a;
  --paper-sunk: #292521;
  --ink:        #ece5da;
  --ink-muted:  #b3a99b;
  --ink-faint:  #8a8175;
  --teal:       #6fb3ad;
  --teal-hover: #8fc9c3;
  --rust:       #d98a5a;
  --rule:       #3a342d;
  background-color: var(--paper);
}

/* ------------------------------------------------------------
   10. Small screens
   ------------------------------------------------------------ */
@media (max-width: 720px) {
  .markdown-preview-sizer { padding: 2.2rem 1.2rem 4rem; }
  .markdown-preview-view { font-size: 1.05rem; }
  .markdown-preview-view h1 { font-size: 1.8rem; }
  .markdown-preview-view p + p { text-indent: 1.1em; }
}