* { box-sizing: border-box; }
:root { --bg: #050505; --fg: #ededed; --muted: #b8b8b8; --line: rgba(255,255,255,.14); }
html { background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: Inter, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.header { min-height: 70px; display: flex; align-items: center; justify-content: center; padding: 0 8%; border-bottom: 1px solid rgba(255,255,255,.1); background: #050505; position: relative; z-index: 3; }
.brand { font-size: 17px; letter-spacing: .12em; white-space: nowrap; font-weight: 600; text-align: center; }
.brand:hover { color: #cfcfcf; }
.hero { height: 430px; position: relative; overflow: hidden; display: flex; align-items: center; background: #090a0b; }
.hero-art { position: absolute; inset: 0; background: url("images/Horizon.jpg") center 43% / cover no-repeat; filter: brightness(.55) contrast(1.08); transform: scale(1.01); }
.hero-vignette { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.78), rgba(0,0,0,.28) 65%, rgba(0,0,0,.18)), linear-gradient(0deg, rgba(0,0,0,.35), transparent 55%); }
.hero-copy { position: relative; z-index: 1; width: 100%; padding: 0 8%; text-align: center; }
h1 { font-size: clamp(38px, 5vw, 58px); font-weight: 500; letter-spacing: -.045em; line-height: 1.1; margin: 0; }
.article-section { position: relative; padding: 54px 24px 78px; isolation: isolate; overflow: hidden; }
.article-section::before { content: ""; position: absolute; z-index: -2; inset: 0; background: url("images/Horizon.jpg") center 58% / cover no-repeat; opacity: .07; filter: grayscale(1); }
.article-section::after { content: ""; position: absolute; z-index: -1; inset: 0; background: rgba(5,5,5,.83); }
 .article-layout { width: 100%; max-width: 680px; margin: 0 auto; display: block; }
.article { width: 100%; min-width: 0; text-align: left; }
.article p { font-size: 16px; line-height: 1.85; font-weight: 400; color: #d4d4d4; margin: 0 0 20px; }
.article p:first-child { color: #f2f2f2; }
.footer { min-height: 66px; border-top: 1px solid var(--line); margin: 0 8%; display: flex; align-items: center; justify-content: center; text-align: center; color: #aaa; font-size: 11px; }
.reading-progress { position: fixed; top: 0; left: 0; z-index: 10; height: 2px; width: 0; background: #ddd; }
@media (max-width: 650px) {
  .header { min-height: 62px; padding: 0 6%; }
  .brand { font-size: 13px; letter-spacing: .09em; }
  .hero { height: 360px; }
  .hero-copy { padding: 0 7%; }
  .article-section { padding: 38px 7% 54px; }
  .article p { font-size: 15px; line-height: 1.8; margin-bottom: 18px; }
  .footer { margin: 0 6%; min-height: 66px; padding: 18px 0; font-size: 10px; }
}
@media (max-width: 390px) {
  .header { padding: 0 5%; }
  .brand { font-size: 11px; }
  h1 { font-size: 38px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; } }