:root {
  color-scheme: dark;
  --black: #000;
  --white: #fff;
  --ink: #f6f6f6;
  --muted: #a7a7a7;
  --line: rgba(255,255,255,.16);
  --soft: rgba(255,255,255,.06);
  --glow: rgba(255,255,255,.28);
  --max: 1180px;
  --content: 760px;
  --radius: 8px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; background: var(--black); }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top, rgba(255,255,255,.08), transparent 34rem), var(--black);
  color: var(--ink);
  line-height: 1.68;
  letter-spacing: .004em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
.skip-link {
  position: absolute; left: 1rem; top: -5rem; z-index: 100;
  background: var(--white); color: var(--black); padding: .7rem 1rem; border-radius: var(--radius);
}
.skip-link:focus { top: 1rem; }
.site-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem clamp(1rem, 4vw, 3rem);
  background: rgba(0,0,0,.78);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}
.brand { display: inline-flex; align-items: center; gap: .75rem; font-weight: 800; }
.brand__mark {
  display: grid; place-items: center; width: 2.3rem; height: 2.3rem;
  border: 1px solid var(--white); border-radius: 50%; font-size: .72rem; letter-spacing: .08em;
}
.brand__text { white-space: nowrap; }
.nav { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.55rem); color: var(--muted); font-size: .94rem; }
.nav a, .header-search { position: relative; padding: .35rem 0; }
.nav a::after, .header-search::after {
  content: ""; position: absolute; left: 0; bottom: .1rem; width: 0; height: 1px;
  background: var(--white); transition: width .2s ease;
}
.nav a:hover::after, .header-search:hover::after { width: 100%; }
.header-search {
  border: 1px solid var(--line); padding: .58rem .95rem; border-radius: 999px; font-size: .88rem;
  background: rgba(255,255,255,.035);
}
.header-search::after { display: none; }
.home-hero {
  min-height: calc(100svh - 68px);
  display: grid; align-items: end;
  padding: clamp(6rem, 12vw, 10rem) clamp(1rem, 4vw, 3rem) clamp(3rem, 7vw, 5rem);
  background:
    linear-gradient(90deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.78) 42%, rgba(0,0,0,.28) 100%),
    var(--hero-image) center / cover no-repeat;
  filter: grayscale(1);
}
.home-hero__copy { max-width: 780px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-bottom: 1rem; color: var(--muted);
  font-size: .82rem; font-weight: 750; letter-spacing: .055em;
}
.eyebrow::before { content: ""; width: 1.7rem; height: 1px; background: var(--white); opacity: .55; }
h1, h2, h3 { line-height: 1.07; margin: 0; letter-spacing: 0; text-wrap: balance; }
h1 { font-size: clamp(3rem, 8vw, 7.4rem); max-width: 980px; }
h2 { font-size: clamp(2rem, 5vw, 4.6rem); max-width: 920px; }
h3 { font-size: clamp(1.2rem, 2vw, 1.7rem); }
p { color: var(--muted); margin: 0; text-wrap: pretty; }
.home-hero p { max-width: 670px; margin-top: 1.2rem; font-size: clamp(1.05rem, 2vw, 1.35rem); }
.hero-actions, .article-meta, .filter-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero-actions { margin-top: 2rem; }
.button, button {
  min-height: 2.75rem; border: 1px solid var(--line); border-radius: 999px;
  padding: .78rem 1.1rem; font: inherit; cursor: pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.button--light { background: var(--white); color: var(--black); border-color: var(--white); font-weight: 760; }
.button--ghost { background: rgba(255,255,255,.04); color: var(--white); }
.button:hover, button:hover { transform: translateY(-2px); border-color: var(--white); }
.search-panel, .content-band {
  width: min(var(--max), calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 6rem) 0;
}
.search-panel {
  border-bottom: 1px solid var(--line);
}
.section-heading { display: grid; gap: .8rem; margin-bottom: 2rem; }
.section-heading p { max-width: 720px; }
.search-box {
  display: grid; gap: .5rem; margin: 1.5rem 0;
}
.search-box span { color: var(--muted); font-size: .9rem; }
.search-box input {
  width: 100%; min-height: 4rem; padding: 0 1.1rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--soft); color: var(--white); font: inherit; font-size: 1.15rem;
  outline: none;
}
.search-box input:focus { border-color: var(--white); box-shadow: 0 0 0 4px rgba(255,255,255,.08); }
.filter-chip { background: rgba(255,255,255,.03); color: var(--muted); }
.filter-chip.is-active { background: var(--white); color: var(--black); border-color: var(--white); }
.live-results { margin-top: 1rem; color: var(--muted); min-height: 1.6rem; }
.article-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.article-card {
  display: grid; align-content: start; min-height: 100%;
  background: var(--black); overflow: hidden;
}
.article-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: #111; }
.article-card__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: transform .45s ease, filter .45s ease; }
.article-card:hover img { transform: scale(1.04); filter: grayscale(.2) contrast(1.05); }
.article-card__body { display: grid; gap: .82rem; padding: 1.25rem; }
.article-card h3 a { background-image: linear-gradient(var(--white), var(--white)); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .2s ease; }
.article-card:hover h3 a { background-size: 100% 1px; }
.article-card p { font-size: .98rem; line-height: 1.65; }
.article-shell { width: min(var(--max), calc(100% - 2rem)); margin: 0 auto; }
.breadcrumbs { display: flex; gap: .6rem; align-items: center; padding: 1.4rem 0; color: var(--muted); font-size: .9rem; }
.breadcrumbs a:hover { color: var(--white); }
.article-hero {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end; padding: clamp(3rem, 7vw, 6rem) 0;
  border-bottom: 1px solid var(--line);
}
.article-hero--simple { grid-template-columns: 1fr; }
.article-hero h1 { font-size: clamp(2.8rem, 6vw, 6rem); }
.article-hero p { margin-top: 1rem; font-size: clamp(1rem, 1.8vw, 1.22rem); max-width: 720px; }
.article-meta { margin-top: 1.4rem; color: var(--muted); font-size: .9rem; }
.article-meta span { border: 1px solid var(--line); border-radius: 999px; padding: .45rem .7rem; }
.article-hero__media { margin: 0; border: 1px solid var(--line); overflow: hidden; border-radius: var(--radius); }
.article-hero__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(1); }
.article-layout {
  display: grid; grid-template-columns: 230px minmax(0, var(--content)); gap: clamp(2rem, 5vw, 5rem);
  align-items: start; padding: clamp(3rem, 7vw, 5rem) 0;
}
.article-layout--single { display: block; max-width: var(--content); margin: 0 auto; }
.jump-links {
  position: sticky; top: 6rem; display: grid; gap: .65rem; color: var(--muted); font-size: .92rem;
}
.jump-links span { color: var(--white); font-weight: 800; margin-bottom: .35rem; }
.jump-links a { border-left: 1px solid var(--line); padding-left: .8rem; }
.jump-links a:hover { color: var(--white); border-color: var(--white); }
.article-content { font-size: 1.09rem; line-height: 1.74; }
.article-content .lead {
  color: var(--white); font-size: clamp(1.18rem, 2vw, 1.52rem); line-height: 1.52;
  padding-bottom: 2rem; border-bottom: 1px solid var(--line); margin-bottom: 2rem;
}
.article-content > * + * { margin-top: 1.35rem; }
.article-content h2 { font-size: clamp(1.75rem, 4vw, 3.25rem); margin-top: 3.35rem; }
.article-content h3 { font-size: clamp(1.22rem, 3vw, 1.92rem); margin-top: 2.25rem; }
.article-content p, .article-content li { color: #d8d8d8; }
.article-content a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.article-content figure { margin: 2rem 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #050505; }
.article-content figure img { width: 100%; filter: grayscale(.85); }
.article-content figcaption { color: var(--muted); font-size: .9rem; padding: .75rem 1rem; border-top: 1px solid var(--line); }
.article-content ul, .article-content ol { padding-left: 1.3rem; }
.editor-note {
  margin-top: 3rem; padding: 1.3rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}
.editor-note strong { display: block; margin-bottom: .45rem; }
.article-nav {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); margin-bottom: clamp(3rem, 7vw, 5rem);
}
.article-nav a { display: grid; gap: .35rem; padding: 1.2rem; background: var(--black); }
.article-nav span { color: var(--muted); font-size: .86rem; letter-spacing: .045em; }
.site-footer {
  display: flex; justify-content: space-between; gap: 2rem; align-items: end;
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 3rem);
  border-top: 1px solid var(--line); color: var(--muted);
}
.site-footer p { max-width: 520px; margin-top: .5rem; }
.site-footer nav { display: flex; gap: 1rem; flex-wrap: wrap; }
.site-footer a:hover { color: var(--white); }
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.error-page { min-height: 70svh; }
@media (max-width: 940px) {
  .nav { display: none; }
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-hero, .article-layout { grid-template-columns: 1fr; }
  .jump-links { position: static; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }
}
@media (max-width: 640px) {
  .site-header { padding-inline: 1rem; }
  .brand__text { display: none; }
  .home-hero { min-height: 86svh; }
  .article-grid, .article-nav { grid-template-columns: 1fr; }
  .article-card__body { padding: 1rem; }
  .article-shell, .search-panel, .content-band { width: min(100% - 1rem, var(--max)); }
  .article-content { font-size: 1rem; }
}