/* =============================================================================
   "out-of-band" — a Custom CSS theme for micro.blog
   Built to sit on top of TINY THEME (the most CSS-friendly micro.blog theme).

   HOW TO INSTALL
   1. micro.blog dashboard → Design → Edit Themes → install/select "Tiny" theme.
   2. Design → Edit CSS → paste this entire file → Update.
   3. Reload your site in another tab.

   Concept: signal the craft, not the costume. No locks/shields/hoodies.
   Monospace headlines + log-line metadata + one restrained "signal amber".
   Respects the visitor's system light/dark preference automatically.

   NOTE: micro.blog themes differ slightly in their class names. This file
   targets standard HTML + microformat classes (.h-entry, .e-content, .p-name),
   which Tiny uses, so it should land cleanly. If one element looks off, it's
   almost always a one-line selector tweak — inspect it and adjust, or send me
   the rendered HTML and I'll patch it.
   ============================================================================= */

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

/* ---- design tokens : LIGHT (default) -------------------------------------- */
:root{
  --oob-ink:        #f7f7f3;
  --oob-panel:      #ecece5;
  --oob-line:       #deded5;
  --oob-fg:         #23272e;
  --oob-strong:     #0f1114;
  --oob-muted:      #6b7280;
  --oob-faint:      #9aa0aa;
  --oob-signal:     #9a6c08;   /* amber, darkened for light-mode contrast   */
  --oob-signal-dim: #9a6c0818;

  /* --- alternate accents: comment the two lines above and uncomment a pair ---
  --oob-signal:#1f7a4d; --oob-signal-dim:#1f7a4d18;   (phosphor)
  --oob-signal:#5a48d6; --oob-signal-dim:#5a48d618;   (ultraviolet)            */

  /* best-effort overrides of Tiny Theme's own variables (harmless if unused) */
  --background: var(--oob-ink);
  --text-color: var(--oob-fg);
  --link-color: var(--oob-signal);
  --link-hover-color: var(--oob-signal);
  --code-background: var(--oob-panel);
}

/* ---- design tokens : DARK (auto, follows the visitor's OS) ----------------- */
@media (prefers-color-scheme: dark){
  :root{
    --oob-ink:        #0d0f12;
    --oob-panel:      #15181d;
    --oob-line:       #262b33;
    --oob-fg:         #d6dae1;
    --oob-strong:     #f2f4f7;
    --oob-muted:      #828b99;
    --oob-faint:      #545c69;
    --oob-signal:     #e0b341;
    --oob-signal-dim: #e0b34122;

    /* dark alternates:
    --oob-signal:#5fc98c; --oob-signal-dim:#5fc98c1f;   (phosphor)
    --oob-signal:#9a8cff; --oob-signal-dim:#9a8cff1f;   (ultraviolet)          */

    --background: var(--oob-ink);
    --text-color: var(--oob-fg);
    --link-color: var(--oob-signal);
  }
}

/* ---- base ----------------------------------------------------------------- */
body{
  background:var(--oob-ink) !important;
  color:var(--oob-fg) !important;
  font-family:"Inter", system-ui, -apple-system, sans-serif !important;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--oob-signal); color:var(--oob-ink); }

a{ color:var(--oob-fg); text-decoration:none; }
a:focus-visible{ outline:2px solid var(--oob-signal); outline-offset:3px; }

/* ---- masthead / site title ------------------------------------------------ */
/* Tiny renders the site title as an <h1> (often inside .header / a .u-url).   */
header h1, .header h1, h1.p-name, .site-name{
  font-family:"JetBrains Mono", ui-monospace, monospace !important;
  font-weight:600 !important;
  letter-spacing:-.01em;
  color:var(--oob-strong) !important;
}
/* blinking terminal caret after the site title */
header h1 a::after, .header h1 a::after, .site-name a::after{
  content:"";
  display:inline-block;
  width:.55ch; height:1.05em;
  margin-left:.2ch;
  background:var(--oob-signal);
  transform:translateY(.12em);
  animation:oob-blink 1.15s steps(1) infinite;
}
@keyframes oob-blink{ 50%{ opacity:0; } }

/* site description / tagline + nav set in mono */
.header p, .site-description, nav, .menu, .navigation{
  font-family:"JetBrains Mono", ui-monospace, monospace !important;
}
nav a, .menu a{
  color:var(--oob-muted) !important;
  font-size:.84rem;
}
nav a:hover, .menu a:hover{ color:var(--oob-strong) !important; }

/* ---- posts (microformat structure Tiny uses) ----------------------------- */
.h-entry{ border-color:var(--oob-line) !important; }

/* log-line post metadata: date · readtime · #category */
.dt-published, .post-date, time, .h-entry .metadata, .post-meta{
  font-family:"JetBrains Mono", ui-monospace, monospace !important;
  font-size:.76rem !important;
  letter-spacing:.02em;
  color:var(--oob-muted) !important;
  font-variant-numeric:tabular-nums;
}
/* categories rendered as #tags in the accent color */
.p-category, .category, .post-categories a{
  font-family:"JetBrains Mono", ui-monospace, monospace !important;
  color:var(--oob-signal) !important;
  font-size:.76rem !important;
}

/* post titles set in MONOSPACE — the signature move */
.p-name, h1.p-name, h2.p-name, .post-title, .h-entry h1, .h-entry h2{
  font-family:"JetBrains Mono", ui-monospace, monospace !important;
  font-weight:600 !important;
  letter-spacing:-.015em;
  color:var(--oob-strong) !important;
  line-height:1.25;
}
.p-name a, .post-title a{ color:var(--oob-strong) !important; }
.p-name a:hover, .post-title a:hover{ color:var(--oob-signal) !important; }

/* ---- article body --------------------------------------------------------- */
.e-content{ font-size:1.0625rem; }
.e-content a, .post-content a{
  color:var(--oob-fg) !important;
  border-bottom:1px solid var(--oob-faint);
}
.e-content a:hover, .post-content a:hover{
  color:var(--oob-signal) !important;
  border-bottom-color:var(--oob-signal);
}
.e-content h2, .e-content h3, .e-content h4{
  font-family:"JetBrains Mono", ui-monospace, monospace !important;
  color:var(--oob-strong) !important;
  letter-spacing:-.01em;
}
.e-content strong{ color:var(--oob-strong) !important; }
.e-content li::marker{ color:var(--oob-signal); }

blockquote{
  border-left:2px solid var(--oob-signal) !important;
  padding-left:1.3rem !important;
  color:var(--oob-muted) !important;
  font-style:italic;
  margin:1.6rem 0 !important;
}

hr{ border:0 !important; border-top:1px solid var(--oob-line) !important; }

/* ---- code ----------------------------------------------------------------- */
code, pre, kbd{ font-family:"JetBrains Mono", ui-monospace, monospace !important; }
:not(pre) > code{
  background:var(--oob-signal-dim) !important;
  color:var(--oob-signal) !important;
  padding:.12em .4em;
  border-radius:3px;
  font-size:.86em;
}
pre{
  background:var(--oob-panel) !important;
  border:1px solid var(--oob-line) !important;
  border-radius:6px !important;
  padding:1rem 1.1rem !important;
  font-size:.84rem !important;
  line-height:1.6;
  overflow-x:auto;
}
pre code{ background:none !important; color:var(--oob-fg) !important; padding:0 !important; }

/* ---- images --------------------------------------------------------------- */
.e-content img{ border-radius:6px; border:1px solid var(--oob-line); }

/* ---- footer / colophon ---------------------------------------------------- */
footer, .footer{
  font-family:"JetBrains Mono", ui-monospace, monospace !important;
  font-size:.74rem !important;
  color:var(--oob-muted) !important;
  border-top:1px solid var(--oob-line);
}
footer a, .footer a{ color:var(--oob-muted) !important; }
footer a:hover, .footer a:hover{ color:var(--oob-signal) !important; }

/* ---- quality floor -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  header h1 a::after, .header h1 a::after, .site-name a::after{ animation:none; }
}

p.attribution {
	display: none
}