/* =========================================================
   ONE • LIFE  —  theme for Obsidian Publish
   Light: soft cream paper lit from above, a thin band of morning sky, gold dots
   Dark:  deep "Krishna" blue, warm cream text, gold dots
   Menu is hidden until you ask for it (the "☰ Contents" button).
   Put in the ROOT of the One Life vault as publish.css and publish it.
   ========================================================= */

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

/* ---------- Fonts, sizes, width ---------- */
body,
.published-container {
  --font-text-theme: 'Lora', Georgia, serif;
  --font-interface-theme: 'Lora', Georgia, serif;
  --font-monospace-theme: ui-monospace, 'SF Mono', Menlo, monospace;
  --font-text-size: 18.5px;
  --line-height-normal: 1.9;
  --page-width: 640px;
  --file-line-width: 640px;
  --page-side-padding: 28px;
  --ol-drawer-width: 340px;
  --ol-title-font: 'Cormorant Garamond', Georgia, serif;
}

/* ---------- Light: morning ---------- */
.theme-light {
  --background-primary: #f7f2e8;           /* soft cream, a step dimmer than white paper */
  --background-primary-alt: #efe9db;
  --background-secondary: #f7f2e8;
  --background-secondary-alt: #ebe4d3;
  --background-modifier-border: #e0d8c6;

  --text-normal: #3f3a33;                  /* warm charcoal, not black */
  --text-muted: #7a7366;
  --text-faint: #a69e8e;
  --h1-color: #2f3d56; --h2-color: #2f3d56; --h3-color: #38465e;
  --h4-color: #38465e; --h5-color: #38465e; --h6-color: #38465e;

  --link-color: #2f3d56;
  --link-color-hover: #1d2a40;
  --link-external-color: #2f3d56;
  --link-unresolved-color: #7a7366;
  --text-accent: #2f3d56;

  --ol-gold: #b07f22;
  --ol-gold-soft: rgba(176, 127, 34, 0.45);
  --ol-sky: #bccfe6;                       /* the thin band at the very top */
  --ol-backdrop: rgba(35, 54, 79, 0.18);
  --code-background: #ede6d6;
  --blockquote-border-color: #d9c79d;
  --ol-quote-text: #98701f;   /* gold, deep enough to read on cream */
  --ol-quote-bar: #7d5c1b;
  --ol-band-h: 5px;
  --ol-progress: #b07f22;     /* the band slowly fills with gold as you read */

  /* atmosphere: light pools softly where you read, with a whisper of dawn at
     the very top. Tune the last number in each gradient (its strength). */
  --ol-warm-glow: radial-gradient(ellipse 80% 70% at 50% 0%, rgba(255,252,242,0.88) 0%, rgba(255,252,242,0.42) 45%, rgba(255,252,242,0) 78%);
  --ol-sky-glow: linear-gradient(180deg, rgba(188,208,240,0.26) 0%, rgba(246,208,172,0.12) 24%, rgba(246,208,172,0) 48%);
  --ol-vignette: radial-gradient(ellipse 100% 85% at 50% 42%, rgba(0,0,0,0) 58%, rgba(130,95,40,0.075) 100%);
  --ol-grain-opacity: 0.05;
  --ol-dot-glow: none;
  --ol-title-glow: none;
}

/* ---------- Dark: dusk (Krishna blue) ---------- */
.theme-dark {
  --background-primary: #1b2e4a;
  --background-primary-alt: #213757;
  --background-secondary: #1b2e4a;
  --background-secondary-alt: #243b5c;
  --background-modifier-border: #2e4566;

  --text-normal: #d8dde5;
  --text-muted: #9fb0c6;
  --text-faint: #6f84a1;
  --h1-color: #f7e7b9; --h2-color: #f3ebd8; --h3-color: #f3ebd8;
  --h4-color: #f3ebd8; --h5-color: #f3ebd8; --h6-color: #f3ebd8;

  --link-color: #f3ebd8;
  --link-color-hover: #ffffff;
  --link-external-color: #f3ebd8;
  --link-unresolved-color: #9fb0c6;
  --text-accent: #f3ebd8;

  --ol-gold: #e2b653;
  --ol-gold-soft: rgba(226, 182, 83, 0.5);
  --ol-sky: #e2b653;                        /* at dusk the band is a gold line */
  --ol-backdrop: rgba(8, 16, 30, 0.45);
  --code-background: #243b5c;
  --blockquote-border-color: #6b5a33;
  --ol-quote-text: #e2b653;
  --ol-quote-bar: #b8892b;
  --ol-band-h: 2px;
  --ol-progress: #f7e7b9;

  /* atmosphere: tune these to taste (alpha = the last number) */
  --ol-sky-glow: linear-gradient(180deg, rgba(58,96,148,0.42) 0%, rgba(58,96,148,0.14) 42%, rgba(58,96,148,0) 100%);
  --ol-warm-glow: radial-gradient(ellipse 55% 60% at 50% 16%, rgba(226,182,83,0.12), rgba(226,182,83,0) 70%);
  --ol-vignette: radial-gradient(ellipse 100% 85% at 50% 42%, rgba(0,0,0,0) 60%, rgba(4,10,22,0.45) 100%);
  --ol-grain-opacity: 0.06;
  --ol-dot-glow: 0 0 12px rgba(226,182,83,0.55);
  --ol-title-glow: 0 0 42px rgba(247,231,185,0.16);
}

/* ---------- Page background everywhere ---------- */
body,
.site-body-left-column,
.site-header {
  background-color: var(--background-primary) !important;
}
/* Everything the text sits on is see-through, so the sky, edge shading and
   grain can live behind the words instead of hazing them. */
.published-container,
.site-body,
.site-body-center-column,
.site-body-right-column,
.render-container,
.render-container-inner,
.publish-renderer,
.markdown-preview-view {
  background-color: transparent !important;
}

/* ---------- The thin band of sky at the top ---------- */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--ol-sky);
  z-index: 50;
  pointer-events: none;
}
.theme-dark body::before,
body.theme-dark::before { height: 2px; opacity: 0.7; }

/* ---------- No right sidebar: the text stands alone ---------- */
.site-body-right-column { display: none !important; }
.site-body { max-width: none !important; }
.site-body-center-column {
  flex: 1 1 auto !important;
  max-width: none !important;
}

/* ---------- Body text ---------- */
.markdown-rendered,
.markdown-preview-view,
.markdown-rendered p,
.markdown-rendered li {
  font-family: 'Lora', Georgia, serif !important;
  font-size: calc(18.5px * var(--ol-scale, 1));   /* A− / A+ buttons set --ol-scale */
  line-height: 1.9;
  color: var(--text-normal);
  -webkit-font-smoothing: antialiased;
}
.markdown-rendered p { margin: 0 0 1.5em; }

.markdown-preview-view .markdown-preview-sizer,
.published-container .markdown-preview-sizer,
.page-header {
  max-width: 640px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* The text container must not be a scroller of its own. Its content overflows
   it by a few pixels, which made the browser give it a stray scrollbar and send
   every scroll gesture to it first (stutter, "first scroll doesn't take").
   The page itself scrolls one level up, at the window's edge. */
.published-container .markdown-preview-view .markdown-preview-sizer {
  overflow: visible !important;
}

/* ---------- Page title: soft serif + one gold dot beneath ---------- */
.page-header,
.markdown-rendered .inline-title {
  font-family: var(--ol-title-font) !important;
  font-weight: 500 !important;
  font-size: 58px !important;
  line-height: 1.08 !important;
  letter-spacing: -0.01em !important;
  color: var(--h1-color) !important;
  margin-top: 96px !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border: none !important;
}
.page-header::after,
.markdown-rendered .inline-title::after {
  content: '•';
  display: block;
  color: var(--ol-gold);
  font-size: 22px;
  line-height: 1;
  margin: 26px 0 44px;
}

/* ---------- Headings ---------- */
.markdown-rendered h1,
.markdown-rendered h2,
.markdown-rendered h3,
.markdown-rendered h4 {
  font-family: var(--ol-title-font) !important;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.005em;
  border: none;
}
.markdown-rendered h1 { font-size: 2.2em; margin: 1.6em 0 0.5em; }
.markdown-rendered h2 { font-size: 1.75em; margin: 1.8em 0 0.5em; }
.markdown-rendered h3 { font-size: 1.4em; margin: 1.6em 0 0.4em; font-style: italic; }
.markdown-rendered h4 { font-size: 1.15em; margin: 1.4em 0 0.4em; }

/* ---------- Links: ink with a gold underline ---------- */
.markdown-rendered a,
.markdown-rendered .internal-link,
.markdown-rendered .external-link {
  color: var(--link-color) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--ol-gold-soft) !important;
  text-decoration-thickness: 1.5px !important;
  text-underline-offset: 5px !important;
  transition: text-decoration-color 0.2s;
}
.markdown-rendered a:hover {
  color: var(--link-color-hover) !important;
  text-decoration-color: var(--ol-gold) !important;
}
.markdown-rendered .external-link { background-image: none !important; padding-right: 0 !important; }

/* ---------- Section breaks (---) become three gold dots ---------- */
.markdown-rendered hr {
  border: none !important;
  height: auto !important;
  margin: 3.2em 0 !important;
  text-align: center;
  overflow: visible;
  background: none !important;
}
.markdown-rendered hr::after {
  content: '•   •   •';
  white-space: pre;
  color: var(--ol-gold);
  font-size: 14px;
  letter-spacing: 0.2em;
}

/* ---------- Quotes, lists, code, images ---------- */
.markdown-rendered blockquote {
  border-left: 3px solid var(--ol-quote-bar) !important;
  border-radius: 0 !important;
  background: none !important;
  padding: 0.1em 0 0.1em 1.2em !important;
  margin: 2em 0 !important;
  font-family: var(--ol-title-font) !important;
  font-style: italic;
  font-size: 1.3em;
  line-height: 1.55;
  color: var(--ol-quote-text) !important;
}
.markdown-rendered blockquote p { font-family: inherit !important; font-size: inherit; line-height: inherit; color: inherit; }
.markdown-rendered ul > li::marker { color: var(--ol-gold); }
.markdown-rendered code { font-size: 0.85em; border-radius: 4px; padding: 0.12em 0.35em; }
.markdown-rendered pre { border: 1px solid var(--background-modifier-border); border-radius: 10px; padding: 1em 1.2em; }
.markdown-rendered img { border-radius: 6px; }
.callout { border-radius: 10px !important; }

/* ---------- Backlinks: quiet ---------- */
.backlinks {
  border-top: none;
  margin-top: 5em;
  padding-top: 1.5em;
  font-size: 15px;
  color: var(--text-muted);
}

/* =========================================================
   Hidden menu (desktop) — only when publish.js is running
   (it adds body.ol-js). Without the script, the normal sidebar shows.
   publish.js adds the "☰ Contents"
   button and opens/closes the drawer by adding body.ol-menu-open
   ========================================================= */
@media (min-width: 751px) {
  body.ol-js .site-body-left-column {
    position: fixed !important;
    top: 0 !important; left: 0 !important; bottom: 0 !important;
    width: var(--ol-drawer-width) !important;
    min-width: var(--ol-drawer-width) !important;
    max-width: var(--ol-drawer-width) !important;
    z-index: 200 !important;
    overflow-y: auto !important;
    background: var(--background-primary-alt) !important;
    border-right: 1px solid var(--background-modifier-border) !important;
    transform: translateX(-100%);
    transition: transform 0.35s ease;
    padding-top: 64px !important;
  }
  body.ol-js.ol-menu-open .site-body-left-column {
    transform: translateX(0);
  }
  body.ol-js .site-body-center-column { margin-left: 0 !important; }
}

#ol-menu-btn {
  position: fixed;
  top: 22px;
  left: 26px;
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 6px 8px;
  font-family: var(--ol-title-font);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  transition: color 0.2s;
}
#ol-menu-btn {
  background: var(--background-primary-alt) !important;
  border: 1px solid var(--background-modifier-border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  padding: 5px 12px !important;
}
#ol-menu-btn:hover {
  color: var(--h1-color);
  border-color: var(--ol-gold-soft) !important;
}
#ol-menu-btn .ol-dot { color: var(--ol-gold); }
#ol-menu-btn .ol-lines { font-size: 16px; opacity: 0.8; }

#ol-backdrop {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--ol-backdrop);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
}
body.ol-menu-open #ol-backdrop { opacity: 1; pointer-events: auto; }

@media (max-width: 750px) {
  #ol-menu-btn, #ol-backdrop { display: none !important; }
}

/* ---------- Menu contents ---------- */
.site-body-left-column-site-name,
.site-header-text {
  font-family: var(--ol-title-font) !important;
  font-weight: 500 !important;
  color: var(--h1-color) !important;
  letter-spacing: 0.01em;
}
.site-body-left-column-inner { padding-left: 28px !important; padding-right: 20px !important; }
.tree-item-self {
  font-family: 'Lora', Georgia, serif !important;
  font-size: 14.5px !important;
  line-height: 1.35 !important;
  color: var(--text-muted) !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  background: none !important;
  border-radius: 0 !important;
  min-height: 0 !important;
}
.tree-item-self:hover { color: var(--h1-color) !important; background: none !important; }
.tree-item-self.mod-active,
.tree-item-self.is-active {
  color: var(--h1-color) !important;
  background: none !important;
  position: relative;
}
.tree-item-self.mod-active::before,
.tree-item-self.is-active::before {
  content: '•';
  position: absolute;
  left: -14px;
  color: var(--ol-gold);
}
.tree-item-children { padding-left: 8px !important; margin-left: 6px !important; border-left-color: var(--background-modifier-border) !important; }
.tree-item-icon, .collapse-icon { color: var(--text-faint) !important; }
.site-header { border: none !important; box-shadow: none !important; }

/* =========================================================
   Homepage (a note with   cssclasses: home   in its properties)
   ========================================================= */
.home .page-header,
.home .inline-title { display: none !important; }
.home .home-hero { text-align: center; padding: 5em 0 2em; }
.home .home-hero h1 {
  font-family: var(--ol-title-font) !important;
  font-size: 64px !important;
  font-weight: 500 !important;
  margin: 0 0 0.3em !important;
  color: var(--h1-color);
}
.home .home-hero p { font-size: 20px; color: var(--text-muted); margin: 0; font-style: italic; }
.home .home-hero::after { content: '•'; display: block; color: var(--ol-gold); font-size: 22px; margin-top: 1.6em; }
.home h2 {
  font-family: 'Lora', serif !important;
  font-size: 13px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--text-faint) !important;
  text-align: center;
  margin-top: 3em !important;
}
.home .post-item { padding: 1.4em 0; text-align: center; }
.home .post-item h3 { font-size: 1.7em; margin: 0.1em 0 0.25em; font-style: normal; }
.home .post-item h3 a { text-decoration: none !important; color: var(--h1-color) !important; }
.home .post-item h3 a:hover { text-decoration: underline !important; }
.home .post-item p { margin: 0; color: var(--text-muted); }
.home .post-date { font-size: 13px; letter-spacing: 0.08em; color: var(--text-faint); }
.home .home-footer { text-align: center; font-size: 15px; color: var(--text-muted); }

/* "An invitation" homepage */
.home .home-intro p {
  font-size: 20px;
  line-height: 1.85;
  text-align: center;
  max-width: 30em;
  margin: 2.5em auto 0;
}
.home .home-begin {
  text-align: center;
  margin: 2.8em 0 4em;
}
.home .home-begin p {
  font-family: var(--ol-title-font) !important;
  font-style: italic;
  font-size: 24px;
  color: var(--text-muted);
}
.home .home-begin a { font-style: normal; }

/* "The basics" homepage: pages not written yet stay faint */
.home .post-item.soon h3,
.home .post-item.soon p { color: var(--text-faint) !important; }
.home .post-item.soon p { font-style: italic; }

/* ---------- Mobile ---------- */
@media (max-width: 750px) {
  .markdown-rendered,
  .markdown-rendered p,
  .markdown-rendered li { font-size: calc(17.5px * var(--ol-scale, 1)); line-height: 1.8; }
  .page-header,
  .markdown-rendered .inline-title,
  .home .home-hero h1 { font-size: 42px !important; margin-top: 36px !important; }
  .home .home-hero { padding-top: 2.5em; }
  .site-body-left-column {
    width: min(85vw, 340px) !important;
    min-width: min(85vw, 340px) !important;
    max-width: min(85vw, 340px) !important;
  }
}

/* =========================================================
   Hide "Powered by Obsidian Publish"
   ========================================================= */
.site-footer { display: none !important; }

/* =========================================================
   Homepage entries, compact (plain-markdown Home note)
   Each entry: optional image line, then ### [[Title]], then a teaser line.
   ========================================================= */
.home .home-hero { padding: 3.5em 0 0 !important; }
.home .home-hero::after { margin: 0.9em 0 1.4em !important; }

.home .markdown-rendered h3 {
  font-style: normal !important;
  font-size: 1.55em !important;
  margin: 0 0 0.15em !important;
}
/* Home entries: whatever Publish adds to a heading (link icons and the like)
   stays on the same line as the title, so the teaser sits snug beneath it
   from the very first paint. */
.home .markdown-rendered h3 {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: baseline;
  column-gap: 0.4em;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.25 !important;
  text-wrap: wrap !important;
}
.home .markdown-rendered h3 > * { flex: 0 0 auto; }

.home .markdown-rendered h3 a {
  text-decoration: none !important;
  color: var(--h1-color) !important;
}
.home .markdown-rendered h3 a:hover {
  text-decoration: underline !important;
  text-decoration-color: var(--ol-gold) !important;
}
.home .el-h3 + .el-p p,
.home h3 + p {
  margin: 0 0 1.9em !important;
  color: var(--text-muted);
  line-height: 1.65;
}

/* Optional square thumbnails, to the left of each entry */
.home .el-p:has(img) {
  float: left;
  clear: both;
  width: 104px;
  margin: 0.3em 1.4em 1.4em 0;
}
.home .el-p:has(img) p { margin: 0 !important; }
.home .el-p:has(img) img {
  width: 104px !important;
  height: 104px !important;
  object-fit: cover;
  border-radius: 6px;
  margin: 0 !important;
  display: block;
}
.home .el-h3 { clear: both; }
.home .el-p:has(img) + .el-h3 { clear: none; }

@media (max-width: 750px) {
  .home .el-p:has(img),
  .home .el-p:has(img) img { width: 72px !important; height: 72px !important; }
  .home .el-p:has(img) { margin-right: 1em; }
}

/* =========================================================
   READING EXPERIENCE
   Quiet additions for long reads. Everything here is optional:
   delete this whole section and the theme above is unchanged.
   ========================================================= */

/* ---------- Typesetting ---------- */
.markdown-rendered {
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.markdown-rendered p,
.markdown-rendered li {
  text-wrap: pretty;            /* no lonely last word on a line */
  hanging-punctuation: first;   /* opening quotes hang in the margin (Safari) */
}
.page-header,
.markdown-rendered .inline-title,
.markdown-rendered h1,
.markdown-rendered h2,
.markdown-rendered h3,
.markdown-rendered h4,
.markdown-rendered blockquote p {
  text-wrap: balance;           /* even line lengths in titles and quotes */
}
.markdown-rendered h2,
.markdown-rendered h3,
.markdown-rendered h4 { scroll-margin-top: 2em; }
::selection { background: var(--ol-gold-soft); }

/* ---------- Reading progress: the top band slowly fills ---------- */
#ol-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--ol-band-h, 5px);
  background: var(--ol-progress, #b8892b);
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: 0;
  z-index: 51;
  pointer-events: none;
  transition: opacity 0.4s;
}
body.ol-scrollable #ol-progress { opacity: 1; }

/* ---------- Under the title: the dot, plus how long this will take ---------- */
body.ol-has-meta .page-header::after,
body.ol-has-meta .markdown-rendered .inline-title::after { display: none !important; }

.ol-meta {
  display: flex;
  align-items: baseline;
  gap: 16px;
  max-width: 640px;
  margin: 26px auto 44px;
}
.ol-meta .ol-meta-dot { color: var(--ol-gold); font-size: 22px; line-height: 1; }
.ol-meta .ol-read {
  font-family: 'Lora', Georgia, serif;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- The end of a page: the dot we began with (pure CSS) ---------- */
body.ol-long .markdown-preview-sizer::after {
  content: '•';
  display: block;
  margin-top: 4em;
  color: var(--ol-gold);
  font-size: 22px;
  line-height: 1;
  text-shadow: var(--ol-dot-glow);
}

/* ---------- Text size: a small  A A  at the top right (desktop) ---------- */
#ol-size {
  position: fixed;
  top: 22px;
  right: 26px;
  z-index: 300;
  display: flex;
  align-items: stretch;
  background: var(--background-primary-alt) !important;
  border: 1px solid var(--background-modifier-border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  overflow: hidden;
}
#ol-size button {
  appearance: none;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0;
  padding: 3px 12px !important;
  cursor: pointer;
  font-family: var(--ol-title-font);
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-muted);
  transition: color 0.2s;
}
#ol-size button + button { border-left: 1px solid var(--background-modifier-border) !important; }
#ol-size .ol-size-down { font-size: 15px; }
#ol-size .ol-size-up   { font-size: 22px; }
#ol-size button:hover:not(:disabled) { color: var(--h1-color); }
#ol-size button:disabled { opacity: 0.35; cursor: default; }
#ol-size button:focus-visible,
#ol-menu-btn:focus-visible { outline: 1.5px solid var(--ol-gold); outline-offset: 2px; }

/* ---------- While you read, the buttons step aside ----------
   Scroll down: they fade. Scroll up, or move the mouse near the top: they return. */
#ol-menu-btn,
#ol-size { transition: opacity 0.35s ease, color 0.2s, border-color 0.2s; }
body.ol-reading:not(.ol-peek):not(.ol-menu-open) #ol-menu-btn,
body.ol-reading:not(.ol-peek):not(.ol-menu-open) #ol-size {
  opacity: 0;
  pointer-events: none;
}

/* ---------- Opt-in drop cap ----------
   Add   cssclasses: dropcap   to a note's properties. */
.dropcap .ol-lead::first-letter {
  float: left;
  font-family: var(--ol-title-font);
  font-weight: 500;
  font-size: 3.9em;
  line-height: 0.78;
  padding: 0.09em 0.1em 0 0;
  color: var(--ol-gold);
}

@media (max-width: 750px) {
  #ol-size { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  #ol-progress, #ol-menu-btn, #ol-size { transition: none; }
}

/* =========================================================
   ATMOSPHERE
   The "morning sky / dusk" idea, spread into the page instead of
   living only in the thin band at the top. Delete this section to go
   back to flat colour.
   ========================================================= */

/* A soft sky at the top of every page. It's its own little layer; publish.js
   fades it out as you scroll down, so it never has a hard edge. */
#ol-sky {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 760px;
  z-index: -3;
  pointer-events: none;
  background-image: var(--ol-warm-glow), var(--ol-sky-glow);
  background-repeat: no-repeat;
  background-size: 100% 560px, 100% 760px;
  will-change: opacity;
}

/* Fixed over the whole window: the edges fall away like light from a lamp... */
body::before { z-index: 50; }
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: var(--ol-vignette);
}
/* ...and a very fine grain takes the digital flatness off the colour */
.published-container::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--ol-grain-opacity, 0.05);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}
.theme-dark .published-container::after,
.published-container.theme-dark::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Gold catches a little light */
.page-header::after,
.markdown-rendered .inline-title::after,
.markdown-rendered hr::after,
.ol-meta .ol-meta-dot { text-shadow: var(--ol-dot-glow); }
.page-header,
.markdown-rendered .inline-title { text-shadow: var(--ol-title-glow); }

/* ---------- The scrollbar belongs at the window's edge ---------- */
.published-container .render-container,
.published-container .render-container-inner,
.published-container .markdown-preview-view {
  max-width: none !important;
}

/* olLite(): everything decorative off, for diagnosing */
body.ol-lite #ol-sky,
body.ol-lite #ol-progress,
body.ol-lite::after,
body.ol-lite .published-container::after { display: none !important; }