*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
:root {
  --bg:#090806; --s1:#111009; --s2:#181510; --s3:#201c15; --amber:#D4721E; --a2:#F0A840;
  --adim:rgba(212,114,30,.10); --cream:#EDE8DF; --muted:#7B7368; --dim:#47433C;
  --rule:#1E1A14; --rule2:rgba(255,255,255,.055);
  --ffd:'Barlow Condensed', sans-serif; --ffb:'Barlow', sans-serif; --ffs:'Crimson Pro', Georgia, serif;
}
body { background:var(--bg); color:var(--cream); font-family:var(--ffb); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body::after {
  content:""; position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
}
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; height:auto; }
.wrap { max-width:1280px; margin:0 auto; padding:0 28px; }

.nav { position:sticky; top:0; z-index:100; background:rgba(9,8,6,.97); backdrop-filter:blur(14px) saturate(110%); border-bottom:1px solid var(--rule); }
.nav::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--amber),var(--a2) 50%,var(--amber)); }
.nav-in { display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-logo { width:38px; height:38px; object-fit:contain; }
.brand-name { font-family:var(--ffd); font-size:21px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.brand-sub { margin-top:3px; font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.nav-links { display:flex; align-items:center; gap:2px; }
.nav-links a { padding:7px 10px; border-radius:3px; color:var(--muted); font-family:var(--ffd); font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; transition:color .18s, background .18s; }
.nav-links a:hover { color:var(--cream); background:var(--s2); }
.nav-links a.active { color:var(--amber); }
.nav-links .nav-cta { border:1px solid var(--rule2); color:var(--cream); margin-left:8px; }
.nav-links .nav-cta:hover { border-color:var(--amber); color:var(--amber); background:var(--adim); }
.burger { display:none; background:var(--s2); border:1px solid var(--rule); color:var(--cream); padding:9px 11px; border-radius:3px; cursor:pointer; line-height:0; }

.topic-hero {
  border-bottom:1px solid var(--rule);
  background:radial-gradient(circle at 74% 0%, rgba(212,114,30,.16), transparent 34%), linear-gradient(180deg, rgba(255,255,255,.025), transparent 60%);
}
.topic-hero__grid { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:48px; align-items:end; padding:68px 28px 54px; }
.topic-kicker { color:var(--amber); font-family:var(--ffd); font-size:12px; font-weight:800; letter-spacing:.32em; text-transform:uppercase; margin-bottom:18px; }
.topic-hero h1 { max-width:850px; font-family:var(--ffd); font-size:clamp(50px, 7vw, 96px); line-height:.94; letter-spacing:0; text-transform:uppercase; }
.topic-hero p { max-width:690px; margin-top:22px; color:var(--muted); font-family:var(--ffs); font-size:22px; line-height:1.45; }
.topic-stats { display:grid; grid-template-columns:1fr; gap:10px; }
.topic-stats div { display:flex; justify-content:space-between; align-items:center; min-height:62px; padding:14px 16px; border:1px solid var(--rule); border-left:3px solid var(--amber); background:rgba(17,16,9,.78); }
.topic-stats b { color:var(--cream); font-family:var(--ffd); font-size:34px; line-height:1; }
.topic-stats span { color:var(--muted); font-family:var(--ffd); font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; text-align:right; }

.topic-index { display:flex; flex-wrap:wrap; gap:8px; padding-top:26px; padding-bottom:26px; border-bottom:1px solid var(--rule); }
.topic-index a { display:inline-flex; align-items:center; gap:9px; min-height:38px; padding:9px 12px; border:1px solid var(--rule); background:var(--s1); color:var(--muted); font-family:var(--ffd); font-size:12px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.topic-index a:hover { border-color:var(--amber); color:var(--amber); background:var(--adim); }
.topic-index span { color:var(--amber); }

.topic-list { display:grid; gap:24px; padding-top:40px; padding-bottom:76px; }
.topic-panel { scroll-margin-top:86px; border:1px solid var(--rule); background:linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.006)); }
.topic-panel__head { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:start; padding:26px; border-top:3px solid var(--amber); border-bottom:1px solid var(--rule); }
.topic-number { color:var(--amber); font-family:var(--ffd); font-size:15px; font-weight:900; letter-spacing:.18em; }
.topic-eyebrow { margin-top:12px; color:var(--amber); font-family:var(--ffd); font-size:10px; font-weight:800; letter-spacing:.28em; text-transform:uppercase; }
.topic-panel h2 { margin-top:6px; font-family:var(--ffd); font-size:clamp(34px, 4vw, 56px); line-height:.96; text-transform:uppercase; }
.topic-panel__head p { max-width:760px; margin-top:12px; color:var(--muted); font-family:var(--ffs); font-size:20px; line-height:1.42; }
.topic-open { align-self:start; display:inline-flex; align-items:center; min-height:42px; padding:11px 14px; border:1px solid var(--rule2); background:var(--s1); color:var(--cream); font-family:var(--ffd); font-size:12px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.topic-open:hover { border-color:var(--amber); color:var(--amber); background:var(--adim); }
.topic-panel__body { display:grid; grid-template-columns:330px minmax(0,1fr); gap:24px; padding:26px; }
.topic-guide { border-left:3px solid var(--amber); background:var(--s1); padding:20px; }
.topic-guide h3 { color:var(--cream); font-family:var(--ffd); font-size:25px; line-height:1.05; text-transform:uppercase; }
.topic-guide p { margin-top:12px; color:var(--muted); font-family:var(--ffs); font-size:17px; line-height:1.45; }
.topic-guide strong { color:var(--cream); }
.topic-guide ul { display:grid; gap:9px; margin-top:16px; list-style:none; }
.topic-guide li { position:relative; padding-left:18px; color:var(--muted); font-size:14px; line-height:1.35; }
.topic-guide li::before { content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; background:var(--amber); }
.topic-posts { display:grid; grid-template-columns:1.2fr 1fr; gap:12px; }
.topic-post { display:grid; grid-template-columns:112px minmax(0,1fr); gap:13px; align-items:stretch; min-height:126px; border:1px solid var(--rule); background:var(--s1); transition:border-color .18s, background .18s; }
.topic-post:hover { border-color:rgba(212,114,30,.5); background:var(--s2); }
.topic-post.featured { grid-row:span 2; grid-template-columns:1fr; }
.topic-post img { width:100%; height:100%; min-height:126px; object-fit:cover; }
.topic-post.featured img { aspect-ratio:16/9; height:auto; min-height:0; }
.topic-post div { min-width:0; padding:12px 13px 12px 0; }
.topic-post.featured div { padding:15px; }
.topic-post span { display:block; margin-bottom:7px; color:var(--amber); font-family:var(--ffd); font-size:10px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
.topic-post h3 { color:var(--cream); font-family:var(--ffd); font-size:21px; line-height:1.08; text-transform:uppercase; }
.topic-post:hover h3 { color:var(--amber); }
.topic-post p { margin-top:8px; color:var(--muted); font-family:var(--ffs); font-size:16px; line-height:1.34; }

footer { border-top:1px solid var(--rule); background:var(--s1); padding:26px 0; }
.foot-in { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; }
.foot-copy { font-size:13px; color:var(--muted); }
.foot-copy strong { color:var(--amber); }
.foot-legal { display:flex; gap:14px; }
.foot-legal a { color:var(--muted); font-family:var(--ffd); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.foot-legal a:hover { color:var(--cream); }

@media (max-width:1020px) {
  .topic-hero__grid, .topic-panel__body { grid-template-columns:1fr; }
  .topic-stats { grid-template-columns:repeat(3,1fr); }
  .topic-stats div { display:block; }
  .topic-stats span { display:block; margin-top:6px; text-align:left; }
}
@media (max-width:860px) {
  .burger { display:flex; align-items:center; }
  .nav-links { display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:4px; padding:12px 16px 16px; background:rgba(9,8,6,.99); border-bottom:1px solid var(--rule); }
  .nav-links.open { display:flex; }
  .nav-links a { padding:12px 10px; border:1px solid var(--rule); border-radius:2px; }
  .nav-links .nav-cta { margin-left:0; }
}
@media (max-width:720px) {
  .wrap { padding-left:18px; padding-right:18px; }
  .topic-hero__grid { padding:46px 18px 38px; }
  .topic-hero h1 { font-size:46px; }
  .topic-hero p { font-size:19px; }
  .topic-stats, .topic-posts { grid-template-columns:1fr; }
  .topic-panel__head { grid-template-columns:1fr; padding:20px; }
  .topic-panel__body { padding:20px; }
  .topic-post.featured { grid-row:auto; }
  .topic-post, .topic-post.featured { grid-template-columns:112px minmax(0,1fr); }
  .topic-post.featured img { height:100%; min-height:126px; aspect-ratio:auto; }
  .topic-post.featured div { padding:12px 13px 12px 0; }
  .topic-post p { display:none; }
}