/* ============================================================
   mjkaul.com — custom Micro.blog theme (Tiny Theme base)
   Text-forward, minimal, warm. Robin Sloan / Daring
   Fireball / Marginal Revolution vein.

   Light mode: softened warm paper (not stark white).
   Dark mode:  warm charcoal.
   Manual light/dark toggle: see the two microhook files in the
   repo (theme-microhook-head.html + theme-microhook-toggle.html)
   and the checklist. Without those files this CSS still gives
   automatic light/dark based on the reader's OS setting.

   PASTE THIS into Micro.blog → Design → Edit CSS (base theme:
   "Tiny Theme"). It overrides Tiny Theme's own color variables,
   so everything — including the toggle — stays in sync.

   Tweak the palettes under the :root blocks below.
   ============================================================ */

/* ---------- LIGHT (default, and when reader picks Light) ---------- */
:root,
html[data-theme="light"]{
  --text:#2b2825;
  --link:#99412f;              /* warm rust */
  --link_visited:#99412f;
  --accent1:#423d35;           /* headings / strong meta */
  --accent2:#6f685b;           /* muted meta */
  --background:#f1ede4;        /* warm ecru paper — softer than white */
  --code:#e6e0d2;
  --button-text:#f1ede4;
  --blockquote:#eae3d4;
  --blockquote-border:#c0842f;
  --mb-rule:#ddd6c7;
  --mb-faint:#b3a892;
}

/* ---------- DARK via OS (only if reader hasn't picked Light) ---------- */
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]){
    --text:#e7e0d3;
    --link:#e0977c;            /* warm terracotta, readable on dark */
    --link_visited:#e0977c;
    --accent1:#ece5d7;
    --accent2:#a49a89;
    --background:#1f1d1a;      /* warm charcoal */
    --code:#33302b;
    --button-text:#1f1d1a;
    --blockquote:#2a2723;
    --blockquote-border:#7a6a4f;
    --mb-rule:#38342e;
    --mb-faint:#7d7360;
  }
}

/* ---------- DARK via manual toggle (always wins) ---------- */
html[data-theme="dark"]{
  --text:#e7e0d3;
  --link:#e0977c;
  --link_visited:#e0977c;
  --accent1:#ece5d7;
  --accent2:#a49a89;
  --background:#1f1d1a;
  --code:#33302b;
  --button-text:#1f1d1a;
  --blockquote:#2a2723;
  --blockquote-border:#7a6a4f;
  --mb-rule:#38342e;
  --mb-faint:#7d7360;
}

html{ color-scheme:light dark; }

/* ---------- Typography ---------- */
body{
  font-family:var(--font_old_style) !important;  /* Iowan/Palatino serif */
  font-size:20px !important;
  line-height:1.62 !important;
  max-width:40em !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background-color .25s ease, color .25s ease;
}

/* Masthead */
header h1 a, header h1 a:visited{
  font-family:var(--font_old_style) !important;
  font-weight:700 !important;
  letter-spacing:-0.01em;
}
header p{ font-style:italic; color:var(--accent2) !important; }

/* Post titles */
.p-name, h1, h2, h3{
  font-family:var(--font_old_style) !important;
  font-weight:700 !important;
  letter-spacing:-0.01em;
}

/* Body copy */
.e-content{ font-family:var(--font_old_style) !important; }

/* Links: subtle underline instead of Tiny's plain link */
.e-content a, .p-summary a{
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:.5px;
}
.e-content a:hover, .p-summary a:hover{ text-decoration-thickness:1.2px; }

/* Dates / meta in clean sans */
a.post-date, span.post-date, .post-meta, .microblog_time a{
  font-family:var(--font_system_ui) !important;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.72em !important;
}

/* Navigation: quiet text, not buttons */
nav a, nav a:visited{
  font-family:var(--font_system_ui) !important;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.72em !important;
  border:none !important;
  padding:0 !important;
  color:var(--accent2) !important;
}
nav a:hover{
  background:none !important;
  color:var(--link) !important;
}
/* Space the items out and separate them with a pipe */
nav ul li{ margin-right:0 !important; }
nav ul li:not(:last-child){ margin-right:1em !important; }
nav ul li:not(:last-child)::after{
  content:"|";
  margin-left:1em;
  color:var(--mb-faint);
}

/* Blockquote a touch softer */
blockquote, .blockquote{ font-style:italic; }

/* ---------- Light/Dark toggle button (added by microhook) ---------- */
.theme-toggle{
  font-family:var(--font_system_ui) !important;
  font-size:.72rem !important;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--accent2) !important;
  background:none !important;
  border:none !important;
  padding:0 !important;
  margin-top:.4rem;
  cursor:pointer;
}
.theme-toggle:hover{ background:none !important; color:var(--link) !important; }
.theme-toggle--fixed{ position:fixed; top:1rem; right:1rem; margin:0; z-index:50; }

/* Keep media/embeds in the column */
img, video, iframe{ max-width:100%; height:auto; }