/*
 * Author: [Your Name Here]
 * License: MIT
 * Last Updated: 2025-07-27
 *
 * Description:
 * A clean, typewriter-inspired Obsidian theme optimized for readability and minimal visual noise.
 * Originally based on the Impressionist theme and customized for a personal writing environment.
 */
/* -------- FRONT MATTER ---------
** Theme: Obsidian Typewriter-Impressionist
**Edited by Gemini
** Version number: 2
----------------------------------- */

/* +++ TOC
|_ FONT FACES
|_ COLOR VARIABLES
|_ LIGHT MODE
|_ DARK MODE (ROSÉ PINE MOON)
|_ TYPOGRAPHY & FONTS
|_ MARKDOWN FORMATTING
|_ HIGHLIGHT ACTIVE LINE
|_ SIDEBAR NOTES
|_ UI ELEMENTS
|_ GOOGLE FORM MOBILE ADJUST
|_ STYLE SETTINGS
|_ IMAGE ON TEXT
|_ BOLD & ITALIC FIX
|_ CALLOUT STYLING
*/

/* +++ FONT FACES */
@import url('https://fonts.googleapis.com/css2?family=Beth+Ellen&family=Cardo:ital,wght@0,400;0,700;1,400&display=swap');

/* +++ COLOR VARIABLES */
body {
  /* New Color Palette */
  --color-background-light: #ECE4DA;
  --color-background-secondary-light: #F6F3EC;
  --color-text-light: #36302A;
  --color-text-muted-light: #574C3F;
  --color-border-light: #B9A590;
  --color-hyperlink-light: #F6EAED;

  /* Rosé Pine Moon palette (dark mode) */
  --color-background-dark: #232136;            /* base */
  --color-background-secondary-dark: #2a273f;  /* surface */
  --color-overlay-dark: #393552;
  --color-highlight-low-dark: #2a283e;
  --color-highlight-med-dark: #44415a;
  --color-highlight-high-dark: #56526e;
  --color-muted-dark: #6e6a86;
  --color-subtle-dark: #908caa;
  --color-text-dark: #e0def4;
  --color-love-dark: #eb6f92;
  --color-gold-dark: #f6c177;
  --color-rose-dark: #ea9a97;
  --color-pine-dark: #3e8fb0;
  --color-foam-dark: #9ccfd8;
  --color-iris-dark: #c4a7e7;

  /* Font Variables */
  --font-main: 'Cardo', 'Times New Roman', serif;
  --font-headings: 'Beth Ellen', cursive;
}

/* +++ LIGHT MODE */
.theme-light {
  --background-primary: var(--color-background-light);
  --background-primary-alt: var(--color-background-secondary-light);
  --background-secondary: var(--color-background-secondary-light);
  --background-secondary-alt: var(--color-background-secondary-light);
  --background-transparent: hsla(0, 0%, 96%, 0);
  --background-translucent: rgba(255, 255, 255, 0.85);
  --background-modifier-border: var(--color-border-light);
  --background-modifier-border-hover: hsl(from var(--color-border-light) h s calc(l - 6%));
  --background-modifier-border-focus: hsl(from var(--color-border-light) h s calc(l - 12%));
  --background-modifier-form-field: hsl(from var(--color-background-light) h s calc(l + 2%));
  --background-modifier-form-field-highlighted: hsl(from var(--color-background-light) h s calc(l + 4%));

  --color-accent: var(--color-text-muted-light);
  --background-modifier-accent: var(--color-hyperlink-light);
  --vim-cursor: hsla(from var(--color-text-muted-light) h s l / 0.8);
  --text-accent: var(--color-text-muted-light);
  --text-accent-hover: var(--color-text-light);
  --text-normal: var(--color-text-light);
  --text-muted: var(--color-text-muted-light);
  --text-faint: var(--color-border-light);

  --text-highlight-bg: var(--color-hyperlink-light);
  --text-highlight-bg-active: rgba(246, 234, 237, 0.7);
  --text-selection: rgba(204, 230, 255, 0.99);
  --text-on-accent: var(--color-text-light);

  --interactive-normal: #f2f3f5;
  --interactive-hover: #e9e9e9;
  --interactive-accent: var(--color-hyperlink-light);
  --interactive-accent-hover: var(--color-text-muted-light);
  --interactive-accent-rgb: 87, 76, 63;
  --interactive-success: #197300;

  --scrollbar-active-thumb-bg: rgba(0, 0, 0, 0.2);
  --scrollbar-bg: rgba(0, 0, 0, 0.05);
  --scrollbar-thumb-bg: rgba(0, 0, 0, 0.1);
  --highlight-mix-blend-mode: darken;

  --icon-color: var(--text-muted);
  --icon-hex: 000;

  --graph-line-color: #c0c9ce;

  --code-background: #eee8d5;
}

/* Specific rule for opened/visited hyperlinks in light mode */


/* --- Improved Link Styling (Option B) --- */
.theme-light a,
.theme-light .internal-link,
.theme-light .external-link {
  color: #6c3a1f; /* readable medium-dark brown */
  text-decoration: none;
  font-weight: inherit;
}

.theme-light a:hover,
.theme-light .internal-link:hover,
.theme-light .external-link:hover,
.theme-light a:focus,
.theme-light .internal-link:focus,
.theme-light .external-link:focus {
  color: #3e1f0e; /* darker brown for hover/focus */
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.theme-light a:visited,
.theme-light .internal-link:visited,
.theme-light .external-link:visited {
  color: #85513a; /* slightly desaturated brown */
}


/* +++ DARK MODE (ROSÉ PINE MOON) */
.theme-dark {
  --background-primary: var(--color-background-dark);
  --background-primary-alt: var(--color-background-secondary-dark);
  --background-secondary: var(--color-background-secondary-dark);
  --background-secondary-alt: var(--color-overlay-dark);
  --background-transparent: hsla(249, 24%, 17%, 0);
  --background-translucent: rgba(35, 33, 54, 0.85);
  --background-modifier-border: var(--color-highlight-med-dark);
  --background-modifier-border-hover: var(--color-highlight-high-dark);
  --background-modifier-border-focus: var(--color-subtle-dark);
  --background-modifier-form-field: var(--color-overlay-dark);
  --background-modifier-form-field-highlighted: var(--color-highlight-low-dark);

  --color-accent: var(--color-rose-dark);
  --background-modifier-accent: var(--color-highlight-med-dark);
  --vim-cursor: rgba(234, 154, 151, 0.8);             /* Moon rose */
  --text-accent: var(--color-rose-dark);
  --text-accent-hover: var(--color-iris-dark);
  --text-normal: var(--color-text-dark);
  --text-muted: var(--color-subtle-dark);
  --text-faint: var(--color-muted-dark);

  --text-highlight-bg: rgba(246, 193, 119, 0.25);     /* gold tint */
  --text-highlight-bg-active: rgba(246, 193, 119, 0.45);
  --text-selection: rgba(68, 65, 90, 0.99);           /* highlight-med */
  --text-on-accent: var(--color-background-dark);

  --interactive-normal: var(--color-overlay-dark);
  --interactive-hover: var(--color-highlight-low-dark);
  --interactive-accent: var(--color-rose-dark);
  --interactive-accent-hover: var(--color-iris-dark);
  --interactive-accent-rgb: 234, 154, 151;
  --interactive-success: var(--color-foam-dark);

  --scrollbar-active-thumb-bg: rgba(255, 255, 255, 0.2);
  --scrollbar-bg: rgba(255, 255, 255, 0.05);
  --scrollbar-thumb-bg: rgba(255, 255, 255, 0.1);
  --highlight-mix-blend-mode: lighten;

  --icon-color: var(--text-muted);
  --icon-hex: fff;

  --graph-line-color: #44415a;

  --code-background: var(--color-overlay-dark);
}

/* --- Dark mode link styling (Rosé Pine) --- */
.theme-dark a,
.theme-dark .internal-link,
.theme-dark .external-link {
  color: var(--color-rose-dark);
  text-decoration: none;
  font-weight: inherit;
}

.theme-dark a:hover,
.theme-dark .internal-link:hover,
.theme-dark .external-link:hover,
.theme-dark a:focus,
.theme-dark .internal-link:focus,
.theme-dark .external-link:focus {
  color: var(--color-iris-dark);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.theme-dark a:visited,
.theme-dark .internal-link:visited,
.theme-dark .external-link:visited {
  color: var(--color-foam-dark);
}

/* +++ TYPOGRAPHY & FONTS */
body {
  --font-text-theme: var(--font-main);
  --font-interface-theme: var(--font-text-theme);
  --font-editor-theme: var(--font-main); /* Using Cardo for editor as well */
  --font-editor: var(--font-text-theme), var(--font-text-override), var(--font-editor-theme);
  --font-monospace-default: "JetBrains Mono", monospace;
  --font-monospace: var(--font-monospace-override), var(--font-monospace-theme), var(--font-monospace-default);
  font-variant-emoji: unicode !important; /* emoji will override numbers and special characters */
  --metadata-input-font-size: var(--font-small);

  --font-normal-size: 1em;
  --font-small: 0.813em;
  --font-smaller: 0.688em;
  --font-smallest: 0.625em;

  --code-size: var(--font-small);
  --code-normal: var(--blue);

  --h1: 2.3em;
  --h2: 1.85em;
  --h3: 1.45em;
  --h4: 1.1em;
  --h5: 1em;
  --h6: 0.95em;

  --h1-weight: 640;
  --h2-weight: 530;
  --h3-weight: 560;
  --h4-weight: 500;
  --h5-weight: 500;
  --h6-weight: 500;

  --h1-color: var(--text-normal);
  --h2-color: var(--text-normal);
  --h3-color: var(--text-normal);
  --h4-color: var(--text-normal);
  --h5-color: var(--text-normal);
  --h6-color: var(--text-normal);

  --normal-weight: 500;
  --bold-weight: 700;
  --line-width: 40rem; /* Maximum characters per line */
  --line-height: 1.5;
  --max-width: 88%; /* Amount of padding around the text, use 90% for narrower padding */
  --icon-muted: 0.5;
  --border-width: 1px;
  --border-width-alt: 1px;

  --radius-s: 2px;
  --radius-m: 5px;
  --radius-l: 10px;

  --input-height: 32px;
  --header-height: 40px;

  --yellow: #e5b567;
  --green: #b4d273;
  --orange: #e87d3e;
  --purple: #9e86c8;
  --pink: #b05279;
  --blue: #6c99bb;

  line-height: var(--line-height);
}

/* Apply heading font */
.markdown-preview-view h1, .cm-s-obsidian .cm-header-1,
.markdown-preview-view h2, .cm-s-obsidian .cm-header-2,
.markdown-preview-view h3, .cm-s-obsidian .cm-header-3,
.markdown-preview-view h4, .cm-s-obsidian .cm-header-4,
.markdown-preview-view h5, .cm-s-obsidian .cm-header-5,
.markdown-preview-view h6, .cm-s-obsidian .cm-header-6 {
  font-family: var(--font-headings);
}


/* source mode */
.markdown-source-view {
  font-family: var(--font-text-theme);
}

/* live preview */
.markdown-source-view.is-live-preview {
  font-family: var(--font-editor-theme);
}

/* reading mode */
.markdown-preview-view {
  font-family: var(--font-text-theme);
}

/* +++ MARKDOWN FORMATTING */
/* fade formatting tags out */
.shrink-formatting .CodeMirror-line span.cm-formatting:not(.cm-s-obsidian span.cm-link, .cm-s-obsidian span.cm-hmd-internal-link, .cm-s-obsidian span.cm-url, .cm-s-obsidian span.cm-attribute, .cm-s-obsidian span.cm-quote, span.cm-hashtag.cm-hashtag-begin, .cm-s-obsidian span.cm-formatting-list), /* legacy editor */
.shrink-formatting .markdown-source-view.mod-cm6 .cm-line span.cm-formatting:not(.cm-s-obsidian span.cm-link, .cm-s-obsidian span.cm-hmd-internal-link, .cm-s-obsidian span.cm-url, .cm-s-obsidian span.cm-attribute, .cm-s-obsidian span.cm-quote, span.cm-hashtag.cm-hashtag-begin, .cm-s-obsidian span.cm-formatting-list) /* CM6 editor */ {
  color: var(--text-faint);
  font-size: var(--font-smaller) !important;
}

/* increase blockquote height */
.markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote {
  padding-top: 7px;
  padding-bottom: 7px;
}

/* +++ HIGHLIGHT ACTIVE LINE */
.active-line-highlight .markdown-source-view .CodeMirror-activeline,
.active-line-highlight .markdown-source-view.mod-cm6 .cm-active.cm-line {
  background: var(--background-secondary);
  border-radius: 8px;
}

/* +++ SIDEBAR NOTES */
/* make sidebar notes' background var(--background-primary) */
.mod-right-split .markdown-preview-view,
.mod-left-split .markdown-preview-view,
.mod-right-split .markdown-source-view.mod-cm6 .cm-scroller,
.mod-left-split .markdown-source-view.mod-cm6 .cm-scroller {
  background-color: var(--background-primary);
}

/* +++ UI ELEMENTS */

/* make inline title equal to H1 */
.inline-title {
  font-weight: var(--h1-weight);
}

/* increase space between editor and metadata – credit to Minimal */
.metadata-container {
  --input-height: 2rem;
}
.markdown-source-view .metadata-container {
  transform: translateX(-4px);
}
.is-phone {
  --metadata-label-font-size: var(--font-adaptive-smaller);
  --metadata-input-font-size: var(--font-adaptive-smaller);
}

/* make cursor accent color */
.CodeMirror-cursor {
  background-color: var(--color-accent);
}

/* make Vim cursor transluscent and accent color */
.cm-fat-cursor-mark,
.cm-fat-cursor .CodeMirror-cursor {
  width: inherit;
  background-color: var(--vim-cursor) !important;
}

/* blur background when pop-ups are active
    (credit: Deep Work) */
body .modal {
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
body .modal .prompt-results {
  padding: calc((1rem * 2) * 1);
}
body .modal-bg {
  /* backdrop-filter: blur(8px); */ /* causes slowdowns */
  background-color: rgb(8, 8, 8);
}

/* make workspace frameless */
.workspace-tab-header-container,
.workspace-ribbon.mod-left:before,
.mod-macos.is-hidden-frameless:not(.is-popout-window)
  .sidebar-toggle-button.mod-right {
  background-color: var(--background-primary);
}

/* remove note-to-note link underline */
:root body {
  --link-decoration: none;
  --link-decoration-hover: none;
}

/* centered tables, simplified */
.markdown-rendered table {
  width: 100%;
}

.markdown-rendered table th {
  padding: calc(1em/3) calc(2em/3);
}

.markdown-rendered table td {
  padding: calc(1em/6) calc(2em/3);
}

.markdown-source-view .cm-content .cm-table-widget .table-wrapper {
  width: 100%;
}

.markdown-source-view .cm-content .cm-table-widget th .table-cell-wrapper {
  padding: calc(1em/3) calc(2em/3);
}

.markdown-source-view .cm-content .cm-table-widget td .table-cell-wrapper {
  padding: calc(1em/6) calc(2em/3);
}

/* h1 and surrounding p margin variables, thanks to FireIsGood#0733 */
:root h1 {
  margin: 0;
}
.markdown-preview-view div:has(> h1) + div > p {
  margin-top: 1em;
}
.markdown-preview-view div:has(+ div > h1) > p {
  margin-bottom: 0.33em;
}

/* FIX: margin-top funkiness present since Obsidian 1.1+ */
.markdown-source-view table {
  margin-top: 0;
}

/* FIX: background color for titlebar buttons on Windows */
div.titlebar-button-container.mod-right {
  background-color: var(--background-primary) !important;
}

/* EDITOR: font-scalable edit-block-button */
/* add header padding for button if last column is right-aligned */
.markdown-source-view table th:last-child[align="right"] {
  padding-right: 2.767527675276753em;
  padding-left: 0.8324108241082411em; /* balances padding-right */
}
/* button attributes */
.markdown-source-view.mod-cm6 .edit-block-button {
  opacity: 1;
  top: 0.3em;
  right: 0.25em;
  align-items: center;
  justify-content: center;
}
.markdown-source-view div.edit-block-button svg {
  width: 1.2em;
  height: 1em;
}

/* DARKEN GRAPH VIEW LINS */
.graph-view.color-line {
  color: var(--graph-line-color);
}

/* FOLD INDICATOR SPACING */
/* prevent overlap with text */

div.cm-fold-indicator {
  margin-right: 0;
}

.markdown-source-view.mod-cm6 .cm-fold-indicator .collapse-indicator {
  padding-right: 4px;
  right: 0;
}


/* +++ GOOGLE FORM MOBILE ADJUST + */

.responsive-gform-container {
  position: relative;
  overflow: hidden;
  padding-top: 80.16%; /* This is the magic number for your form's aspect ratio */
  /* Aspect Ratio Calculation: (original height / original width) * 100% */
  /* (513 / 640) * 100% = 80.15625% */
}

.responsive-gform-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* +++ END OF SECTION + */


/* +++ STYLE SETTINGS  +*/

/* @settings

name: Typewriter
id: obsidian-typewriter
settings:
    -
        id: typewriter-editor
        title: Editor
        type: heading
        level: 2
    -
        id: shrink-formatting
        title: Shrink & fade Markdown formatting symbols
        type: class-toggle
        default: on
    -
        id: active-line-highlight
        title: Highlight the active line
        type: class-toggle
        default: on

*/
/* +++ END OF SECTION ++ */


/* +++ IMAGE ON TEXT +++*/


/* For positioning text on an image */
.image-container {
  position: relative; /* This is the key to positioning child elements */
  display: inline-block; /* Makes the container wrap the image */
}

@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');

.image-container .image-text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #574C3F; /* warm, faded brown */
  padding: 20px; /* preserve your padding */
  border-radius: 5px;
  text-align: left; /* align text left for tweet-style layout */
  font-weight: normal;
  pointer-events: none;
  font-family: 'Special Elite', monospace;
  letter-spacing: 0.065em;
  text-shadow:
      0.6px 0.6px 0 rgba(0,0,0,0.18),
      -0.6px -0.6px 0 rgba(0,0,0,0.1),
      0.3px 0.5px 0 rgba(0,0,0,0.05);

  /* allow wrapping */
  white-space: normal;
  overflow: hidden;
  display: inline-block;
  max-width: 90%; /* so text wraps nicely within the image */

  font-size: clamp(0.75rem, 2.6vw, 1.1rem);
  line-height: 1.35;
  word-break: break-word;
  hyphens: auto;
}


/* +++ END OF SECTION ++ */

/* Explicit heading spacing */
h1 {
  margin-top: 1.6em;
  margin-bottom: 0.6em;
}
h2 {
  margin-top: 1.4em;
  margin-bottom: 0.5em;
  border-bottom: none !important; /* This overrides the hidden default underline */
}
h3 {
  margin-top: 1.2em;
  margin-bottom: 0.4em;
}

/* +++ BOLD & ITALIC FIX +++*/

/* Apply bold weight to Markdown bold elements */
.markdown-preview-view strong,
.markdown-preview-view b {
  font-weight: var(--bold-weight);
}

/* Apply bold weight in Live Preview and Source Mode */
.markdown-source-view.mod-cm6 .cm-strong {
  font-weight: var(--bold-weight);
}

/* Apply italic style to Markdown italic elements */
.markdown-preview-view em,
.markdown-preview-view i {
  font-style: italic;
}

/* Apply italic style in Live Preview and Source Mode */
.markdown-source-view.mod-cm6 .cm-em {
  font-style: italic;
}

/* +++ END OF SECTION ++ */

/* +++ CALLOUT STYLING +++ */
/* Each callout type gets its own Rosé Pine accent.
   Light mode uses Rosé Pine Dawn accents (calibrated for cream backgrounds);
   dark mode uses Rosé Pine Moon accents. --callout-color is an RGB triplet
   so Obsidian's default rgba() machinery handles tinting. */

.callout {
    border-radius: var(--radius-m);
    padding: 1rem;
    margin: 1.5rem 0;
    font-size: var(--font-normal-size);
    border: 1px solid rgba(var(--callout-color), 0.35);
    background-color: rgba(var(--callout-color), 0.08);
}

.callout-title {
    color: var(--text-normal);
    font-weight: 500;
}

/* Vertical bar to the left of the title */
.callout-title::before {
    background-color: rgb(var(--callout-color));
    width: 4px;
    height: 100%;
    margin-right: 0.5rem;
}

/* Title icon picks up the accent */
.callout-icon {
    color: rgb(var(--callout-color));
}

/* --- Per-type accents: LIGHT MODE (Rosé Pine Dawn) --- */
.theme-light .callout[data-callout="note"]                  { --callout-color: 121, 117, 147; }  /* subtle */
.theme-light .callout[data-callout="abstract"],
.theme-light .callout[data-callout="summary"],
.theme-light .callout[data-callout="tldr"]                  { --callout-color: 144, 122, 169; }  /* iris */
.theme-light .callout[data-callout="info"],
.theme-light .callout[data-callout="todo"]                  { --callout-color: 86, 148, 159; }   /* foam */
.theme-light .callout[data-callout="tip"],
.theme-light .callout[data-callout="hint"],
.theme-light .callout[data-callout="important"]             { --callout-color: 234, 157, 52; }   /* gold */
.theme-light .callout[data-callout="success"],
.theme-light .callout[data-callout="check"],
.theme-light .callout[data-callout="done"],
.theme-light .callout[data-callout="example"]               { --callout-color: 40, 105, 131; }   /* pine */
.theme-light .callout[data-callout="question"],
.theme-light .callout[data-callout="help"],
.theme-light .callout[data-callout="faq"]                   { --callout-color: 144, 122, 169; }  /* iris */
.theme-light .callout[data-callout="warning"],
.theme-light .callout[data-callout="caution"],
.theme-light .callout[data-callout="attention"]             { --callout-color: 215, 130, 126; }  /* rose */
.theme-light .callout[data-callout="failure"],
.theme-light .callout[data-callout="fail"],
.theme-light .callout[data-callout="missing"],
.theme-light .callout[data-callout="danger"],
.theme-light .callout[data-callout="error"],
.theme-light .callout[data-callout="bug"]                   { --callout-color: 180, 99, 122; }   /* love */
.theme-light .callout[data-callout="quote"],
.theme-light .callout[data-callout="cite"]                  { --callout-color: 121, 117, 147; }  /* subtle */

/* --- Per-type accents: DARK MODE (Rosé Pine Moon) --- */
.theme-dark .callout[data-callout="note"]                   { --callout-color: 144, 140, 170; }  /* subtle */
.theme-dark .callout[data-callout="abstract"],
.theme-dark .callout[data-callout="summary"],
.theme-dark .callout[data-callout="tldr"]                   { --callout-color: 196, 167, 231; }  /* iris */
.theme-dark .callout[data-callout="info"],
.theme-dark .callout[data-callout="todo"]                   { --callout-color: 156, 207, 216; }  /* foam */
.theme-dark .callout[data-callout="tip"],
.theme-dark .callout[data-callout="hint"],
.theme-dark .callout[data-callout="important"]              { --callout-color: 246, 193, 119; }  /* gold */
.theme-dark .callout[data-callout="success"],
.theme-dark .callout[data-callout="check"],
.theme-dark .callout[data-callout="done"],
.theme-dark .callout[data-callout="example"]                { --callout-color: 62, 143, 176; }   /* pine */
.theme-dark .callout[data-callout="question"],
.theme-dark .callout[data-callout="help"],
.theme-dark .callout[data-callout="faq"]                    { --callout-color: 196, 167, 231; }  /* iris */
.theme-dark .callout[data-callout="warning"],
.theme-dark .callout[data-callout="caution"],
.theme-dark .callout[data-callout="attention"]              { --callout-color: 234, 154, 151; }  /* rose */
.theme-dark .callout[data-callout="failure"],
.theme-dark .callout[data-callout="fail"],
.theme-dark .callout[data-callout="missing"],
.theme-dark .callout[data-callout="danger"],
.theme-dark .callout[data-callout="error"],
.theme-dark .callout[data-callout="bug"]                    { --callout-color: 235, 111, 146; }  /* love */
.theme-dark .callout[data-callout="quote"],
.theme-dark .callout[data-callout="cite"]                   { --callout-color: 144, 140, 170; }  /* subtle */

/* --- End of section --- */

/* Center the top logo in Publish (markdown + wiki embeds) */
.markdown-rendered img[alt="logo"],
.markdown-preview-view img[alt="logo"],
.image-embed[alt="logo"] img,
img[alt="logo"] {
  display: block;
  margin-inline: auto;
  height: auto;
  max-width: min(320px, 80vw);
}

/* Mobile fix for text-on-image */
@media (max-width: 600px) {
  .image-container .image-text-overlay {
    padding: 6px 4px;    /* lighter side padding on phones */
    max-width: 85%;      /* give the text a bit more width */
    line-height: 1.3;
    transform: translate(-58%, -50%);
  }
}