/* Clean Blog (dark variant) — adapted for Screentox. MIT-licensed theme by Start Bootstrap */

@font-face {
  font-family: 'Jekteam';
  src: url('/fonts/Jekteam-V4B30.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --stx-bg: #050505;
  --stx-surface: #0b0b0b;
  --stx-surface-2: #111111;
  --stx-text: #F5F5F5;
  --stx-text-muted: #B9B9B9;
  --stx-border: #191919;
  --stx-accent: #00E887;
  --stx-link: #8ec9ff;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: var(--stx-bg);
  color: var(--stx-text);
}

a { color: var(--stx-link); }
a:hover { color: #b6dcff; }

/* Navbar */
.navbar-dark { background-color: var(--stx-surface); border-bottom: 1px solid var(--stx-border); }
.navbar-brand { font-family: 'Jekteam', 'Inter', sans-serif; letter-spacing: 0.03em; }
.navbar-dark .navbar-nav .nav-link { color: #ddd; }
.navbar-dark .navbar-nav .nav-link:hover { color: var(--stx-accent); }

/* Masthead */
.masthead {
  position: relative;
  padding: 5.5rem 0 4rem 0;
  background: radial-gradient(60% 60% at 78% 10%, rgba(0,232,135,0.16), rgba(0,0,0,0) 65%),
              linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  border-bottom: 1px solid var(--stx-border);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.02);
}
.masthead .site-heading, .masthead .page-heading {
  text-align: center;
}
.masthead .site-heading h1, .masthead .page-heading h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 0.25rem;
}
.masthead .subheading { color: var(--stx-text-muted); font-size: 1.05rem; }

/* Post previews */
.post-preview { padding: 1rem 0; }
.post-preview a { color: inherit; text-decoration: none; }
.post-preview .post-title { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.01em; }
.post-preview .post-subtitle { color: #d8d8d8; font-size: 1rem; margin-top: 0.25rem; }
.post-preview a:hover .post-title { color: var(--stx-accent); }
.post-meta { color: #9B9B9B; font-size: 0.9rem; margin-top: 0.4rem; }
hr.my-4 { border-color: var(--stx-border); opacity: 1; }

/* Article content */
article { color: var(--stx-text); }
article h2 { font-size: 1.9rem; line-height: 1.2; margin: 2rem 0 0.65rem 0; }
article h3 { font-size: 1.45rem; line-height: 1.28; margin-top: 1.25rem; color: #fff; letter-spacing: -0.005em; }
article p { color: #cfcfcf; font-size: 1.04rem; line-height: 1.75; margin: 0 0 1.05rem 0; }
article ul, article ol { margin: 0.9rem 0 1rem 0; padding-left: 1.25rem; }
article li { color: #d8d8d8; line-height: 1.6; }
article blockquote { margin: 1rem 0; padding: 0.75rem 1rem; border-left: 3px solid var(--stx-accent); background: rgba(255,255,255,0.03); border-radius: 8px; color: #e8e8e8; }

/* Feature image (shared with Learn aesthetics) */
.feature-image {
  width: 100%;
  max-width: 980px;
  margin: 2rem auto 2rem auto;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--stx-border);
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
}
.feature-image img { display: block; width: 100%; height: auto; }

/* Half-width variant for inline figures */
.feature-image.half { max-width: 50%; margin: 1.5rem auto; }
@media (max-width: 900px) { .feature-image.half { max-width: 100%; } }

/* Buttons */
.btn-accent { background: var(--stx-accent); color: #000; border: none; }
.btn-accent:hover { background: #00c96f; color: #000; }
.btn-soft { background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); color: var(--stx-link); border: 1px solid var(--stx-border); }

/* Footer */
footer { color: #8f8f8f; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

@media (max-width: 900px) {
  article h3 { font-size: 1.3rem; }
}