/* Brutalist dark editorial theme */

:root{
  --bg: #000000;
  --bg-soft: #0a0a0a;
  --text: #f5f5f5;
  --body: #cccccc;
  --muted: #888888;
  --accent: #3A7CA5; /* steel blue */
}

html, body{ 
  background: #000000 !important; 
  color: var(--body); 
}

h1,h2,h3,h4{ color: var(--text); font-weight: 900; letter-spacing: -.02em; }
a{ color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
a:hover{ opacity: .9; }

.big-text{ font-size: clamp(2rem, 6vw, 4.5rem); line-height: .9; font-weight: 900; color: var(--text); }
.micro-text{ font-size: clamp(.8rem, 2.5vw, 1rem); color: var(--muted); }
.side-note{ font-size: clamp(.7rem, 2vw, .9rem); color: var(--muted); opacity: .85; }

/* Mobile-specific typography improvements */
@media (max-width: 768px) {
  .big-text{ font-size: clamp(1.8rem, 8vw, 3rem); line-height: 1; }
  .micro-text{ font-size: .9rem; }
  .side-note{ font-size: .8rem; }
}
.accent{ color: var(--accent); }

/* spacing */
.section{ padding: min(10vh, 6rem) 1.25rem; }

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