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

/* ─────────────────────────────────────────────────────────────
   publish.css
   Body: Lora — Headings/UI: Inter
───────────────────────────────────────────────────────────── */


/* ─── Palette ────────────────────────────────────────────────── */

:root {
  --c-ink:        rgba(0,0,0,0.82);
  --c-ink-mid:    rgba(0,0,0,0.45);
  --c-ink-faint:  rgba(0,0,0,0.08);
  --c-amber:      #b8872a;
  --c-amber-tint: rgba(184, 135, 42, 0.08);
  --c-amber-line: rgba(184, 135, 42, 0.35);
}

.theme-dark {
  --c-ink:        rgba(255,255,255,0.82);
  --c-ink-mid:    rgba(255,255,255,0.45);
  --c-ink-faint:  rgba(255,255,255,0.08);
  --c-amber:      #d4a84b;
  --c-amber-tint: rgba(212, 168, 75, 0.1);
  --c-amber-line: rgba(212, 168, 75, 0.38);
}


/* ─── Core variables ─────────────────────────────────────────── */

:root {
  --font-text-theme:       'Lora', Georgia, serif !important;
  --font-interface-theme:  'Inter', system-ui, sans-serif !important;
  --font-text-size:        18px !important;
  --line-height-normal:    1.75 !important;
  --file-line-width:       680px !important;
}


/* ─── Body text ──────────────────────────────────────────────── */

.markdown-rendered,
.markdown-rendered p,
.markdown-rendered li,
.markdown-rendered td {
  font-family:           'Lora', Georgia, serif !important;
  font-size:             18px;
  line-height:           1.75;
  font-optical-sizing:   auto;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  color:                 var(--c-ink);
}

.markdown-rendered p {
  margin-top:    0;
  margin-bottom: 1.25em;
}

.markdown-rendered strong {
  font-weight: 700;
}

.markdown-rendered a {
  color:                     var(--c-amber);
  text-decoration-color:     var(--c-amber-line);
  text-decoration-thickness: 1px;
  text-underline-offset:     3px;
  transition:                opacity 0.15s;
}

.markdown-rendered a:hover {
  opacity: 0.7;
}

::selection {
  background: var(--c-amber-tint);
}


/* ─── Headings ───────────────────────────────────────────────── */

.markdown-rendered h1,
.markdown-rendered h2,
.markdown-rendered h3,
.markdown-rendered h4 {
  font-family:    'Inter', system-ui, sans-serif !important;
  letter-spacing: -0.02em;
  line-height:    1.2;
  color:          var(--c-ink);
}

.markdown-rendered h1 { font-size: 1.85rem; font-weight: 600; margin: 2rem 0 1rem; }
.markdown-rendered h2 { font-size: 1.25rem; font-weight: 600; margin: 2.5rem 0 0.75rem; }
.markdown-rendered h3 { font-size: 1.05rem; font-weight: 600; margin: 2rem 0 0.5rem; }
.markdown-rendered h4 { font-size: 0.95rem; font-weight: 500; letter-spacing: 0; margin: 1.5rem 0 0.4rem; color: var(--c-ink-mid); }


/* ─── Page title ─────────────────────────────────────────────── */

.inline-title {
  font-family:    'Inter', system-ui, sans-serif !important;
  font-weight:    600;
  letter-spacing: -0.03em;
}


/* ─── Horizontal rule ────────────────────────────────────────── */

.markdown-rendered hr {
  border:  none;
  margin:  4em auto;
}


/* ─── Images ─────────────────────────────────────────────────── */

.markdown-rendered img {
  max-width:    100%;
  height:       auto;
  display:      block;
  margin:       2em auto;
  border-radius: 2px;
}


/* ─── Cover image (float left) ───────────────────────────────── */

.el-p:has(img[src*="assets/covers"]) {
  float:         left;
  width:         38%;
  margin:        0 2em 1.5em 0;
  background:    var(--c-amber-tint);
  border-radius: 2px;
  overflow:      hidden;
}

.el-p:has(img[src*="assets/covers"]) p {
  margin: 0 !important;
}

img[src*="assets/covers"] {
  display:         block !important;
  width:           100% !important;
  height:          220px !important;
  object-fit:      cover !important;
  object-position: center !important;
  border-radius:   0 !important;
  margin:          0 !important;
}

/* Siblings after cover: BFC so they sit beside the float, never wrap under */
.el-p:has(img[src*="assets/covers"]) ~ .el-p,
.el-p:has(img[src*="assets/covers"]) ~ .el-callout {
  display: flow-root;
}

/* Clear float after the page content so nothing bleeds out */
.markdown-rendered::after {
  content:  '';
  display:  block;
  clear:    both;
}



/* ─── Highlights (==text==) ──────────────────────────────────── */

.markdown-rendered mark {
  background:    var(--c-amber-tint);
  color:         inherit;
  padding:       0.05em 0.1em;
  border-radius: 0;
  border-bottom: 1.5px solid var(--c-amber-line);
}


/* ─── Blockquotes (selected passages) ───────────────────────── */

.markdown-rendered blockquote {
  font-style:   normal;
  font-weight:  300;
  font-size:    1.05em;
  line-height:  1.7;
  border-left:  3px solid var(--c-amber-line);
  background:   var(--c-amber-tint);
  padding:      1em 1.25rem;
  margin:       2.5em 0;
  color:        var(--c-ink);
}

.markdown-rendered blockquote p {
  margin-bottom: 0;
}

/* Citation paragraph — last <p> inside blockquote */
.markdown-rendered blockquote p:last-child:not(:first-child) {
  font-family:    'Inter', system-ui, sans-serif !important;
  font-size:      0.76rem;
  font-weight:    400;
  font-style:     normal;
  color:          var(--c-ink-mid);
  margin-top:     0.65em;
  letter-spacing: 0.01em;
}

.markdown-rendered blockquote p:last-child:not(:first-child) em {
  font-style: italic;
}


/* ─── Quote callout (key quotes) ─────────────────────────────── */

.callout[data-callout="quote"] {
  font-family:    'Lora', Georgia, serif !important;
  font-style:     normal;
  font-weight:    300;
  font-size:      1.15em;
  line-height:    1.7;
  background:     rgba(184, 135, 42, 0.1);
  border:         none;
  border-radius:  0;
  padding:        1.75em 2em;
  margin:         2.5em 0;
  position:       relative;
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
}

.callout[data-callout="quote"]::before {
  content:        '\201C';
  position:       absolute;
  right:          0.15em;
  bottom:         -0.35em;
  font-family:    'Lora', Georgia, serif;
  font-size:      9em;
  font-weight:    400;
  line-height:    1;
  color:          var(--c-amber);
  opacity:        0.18;
  pointer-events: none;
  user-select:    none;
}

/* Citation — visually after the quote text */
.callout[data-callout="quote"] .callout-title {
  order:          2;
  font-family:    'Inter', system-ui, sans-serif !important;
  font-style:     normal;
  font-size:      0.76rem;
  font-weight:    400;
  text-transform: none;
  letter-spacing: 0.01em;
  color:          var(--c-ink-mid);
  margin-top:     0.75em;
  margin-bottom:  0;
}

.callout[data-callout="quote"] .callout-content {
  order: 1;
}

.callout[data-callout="quote"] .callout-icon {
  display: none;
}


/* ─── Note callout (new-page marker) ────────────────────────── */

.callout[data-callout="note"] {
  background:    var(--c-amber-tint);
  border:        none;
  border-left:   2px solid var(--c-amber-line);
  border-radius: 0;
  padding:       0.5em 1em;
  margin-bottom: 2em;
}

.callout[data-callout="note"] .callout-title {
  font-family:    'Inter', system-ui, sans-serif !important;
  font-size:      0.72rem;
  font-weight:    500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:          var(--c-amber);
}

.callout[data-callout="note"] .callout-icon,
.callout[data-callout="note"] .callout-content {
  display: none;
}


/* ─── Footnote references (superscripts in body text) ───────── */

.markdown-rendered sup,
.markdown-rendered sub {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size:   0.62em;
  line-height: 0;
  color:       var(--c-amber);
}


/* ─── Footnote section ───────────────────────────────────────── */

.footnotes {
  background: rgba(184, 135, 42, 0.08);
  margin-top: 4em;
  padding:    1.1em 1.5em 1.25em;
}

/* Hide the <hr> Obsidian injects at the top of the footnotes section */
.footnotes hr {
  display: none !important;
}

.footnotes::before {
  content:        'Notes';
  display:        block;
  font-family:    'Inter', system-ui, sans-serif !important;
  font-size:      0.68rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--c-amber);
  margin-bottom:  0.5em;
}

.footnotes ol {
  list-style:  none !important;
  padding:     0 !important;
  margin:      0 !important;
  counter-reset: footnote-items;
}

.footnotes ol,
.footnotes ul,
.footnotes li {
  margin-left:  0 !important;
  padding-left: 0 !important;
}

.footnotes li {
  counter-increment: footnote-items;
  display:       flex !important;
  gap:           0.5em;
  margin:        0 0 0.4em 0 !important;
  padding:       0 !important;
}

.footnotes li:last-child {
  margin-bottom: 0 !important;
}

/* Number */
.footnotes li::before {
  content:     counter(footnote-items);
  flex-shrink: 0 !important;
  min-width:   0.8em;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size:   0.74rem !important;
  font-weight: 600 !important;
  line-height: 1.55 !important;
  color:       var(--c-amber) !important;
}

/* Text — target the <p> inside each <li> directly */
.footnotes li p {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size:   0.74rem !important;
  line-height: 1.55 !important;
  color:       var(--c-ink-mid) !important;
  margin:      0 !important;
  flex:        1;
}

.footnotes a {
  color: var(--c-ink-mid);
}

.footnotes .footnote-backref {
  display: none !important;
}


/* ─── Sidebar / navigation ───────────────────────────────────── */

.site-body-left-column,
.nav-view-outer,
.tree-item-self {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size:   0.875rem;
}


/* ─── Table of contents ──────────────────────────────────────── */

.outline {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size:   0.8rem;
  line-height: 1.5;
}


/* ─── Backlinks ──────────────────────────────────────────────── */

.backlinks {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size:   0.875rem;
}


/* ─── Inline code ────────────────────────────────────────────── */

.markdown-rendered code {
  font-family: var(--font-monospace-theme) !important;
  font-size:   0.85em;
}


/* ─── Tables ─────────────────────────────────────────────────── */

.markdown-rendered table {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size:   0.9em;
}