*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: 'Inter', sans-serif; background: #fff; color: #111; overflow-x: hidden; }
:root { --black:#111; --white:#fff; --red:#e8002d; --gray-100:#f5f5f5; --gray-200:#e8e8e8; --gray-400:#999; --gray-600:#555; --border:#e0e0e0; }

/* NAV */
nav { position: sticky; top:0; z-index:100; background:#fff; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:0 48px; height:64px; }
.logo { font-size:20px; font-weight:800; letter-spacing:-0.02em; text-decoration:none; color:var(--black); }
.nav-right { display:flex; align-items:center; gap:24px; }
.nav-back { font-size:13px; color:var(--gray-600); text-decoration:none; font-weight:500; transition:color 0.2s; }
.nav-back:hover { color:var(--black); }
.nav-cta { background:var(--black); color:#fff; padding:10px 24px; font-size:13px; font-weight:600; letter-spacing:0.02em; text-decoration:none; transition:background 0.2s; }
.nav-cta:hover { background:var(--red); }

/* ARTICLE HERO */
.art-hero { border-bottom:1px solid var(--border); padding:64px 0 48px; }
.art-inner { max-width:780px; margin:0 auto; padding:0 24px; }
.art-category { font-size:11px; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:var(--red); margin-bottom:16px; display:block; text-decoration:none; }
.art-title { font-size:clamp(28px,4vw,48px); font-weight:900; letter-spacing:-0.03em; line-height:1.05; text-transform:uppercase; margin-bottom:20px; }
.art-lead { font-size:17px; color:var(--gray-600); line-height:1.7; margin-bottom:32px; }
.art-meta { display:flex; align-items:center; gap:24px; padding-top:24px; border-top:1px solid var(--border); font-size:12px; color:var(--gray-400); font-weight:500; text-transform:uppercase; letter-spacing:0.06em; }
.art-meta-dot { width:4px; height:4px; background:var(--red); border-radius:50%; flex-shrink:0; }

/* ARTICLE BODY */
.art-body { padding:56px 0 80px; }
.art-body h2 { font-size:22px; font-weight:900; letter-spacing:-0.02em; text-transform:uppercase; margin:48px 0 16px; padding-bottom:12px; border-bottom:2px solid var(--black); }
.art-body h2:first-child { margin-top:0; }
.art-body h3 { font-size:16px; font-weight:800; margin:28px 0 10px; }
.art-body p { font-size:15px; line-height:1.85; color:#222; margin-bottom:18px; }
.art-body ul, .art-body ol { margin:0 0 18px 24px; }
.art-body li { font-size:15px; line-height:1.8; color:#222; margin-bottom:6px; }
.art-body strong { font-weight:700; color:var(--black); }
.art-body a { color:var(--red); text-decoration:underline; }

/* CALLOUT BOX */
.callout { background:var(--gray-100); border-left:4px solid var(--red); padding:20px 24px; margin:28px 0; }
.callout p { margin:0; font-size:14px; color:var(--black); font-weight:500; }
.callout strong { color:var(--red); }

/* TABLE */
.art-table { width:100%; border-collapse:collapse; margin:24px 0; font-size:14px; }
.art-table th { background:var(--black); color:#fff; padding:10px 16px; text-align:left; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; font-weight:700; }
.art-table td { padding:10px 16px; border-bottom:1px solid var(--border); line-height:1.5; }
.art-table tr:last-child td { border-bottom:none; }
.art-table tr:nth-child(even) td { background:var(--gray-100); }

/* CTA BLOCK */
.art-cta { background:var(--black); color:#fff; padding:40px; margin:48px 0; text-align:center; }
.art-cta h3 { font-size:20px; font-weight:900; text-transform:uppercase; letter-spacing:-0.02em; margin-bottom:12px; }
.art-cta p { font-size:14px; color:rgba(255,255,255,0.6); margin-bottom:24px; }
.art-cta a { display:inline-block; background:var(--red); color:#fff; padding:12px 32px; font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; text-decoration:none; transition:opacity 0.2s; }
.art-cta a:hover { opacity:0.85; }

/* RELATED */
.art-related { border-top:1px solid var(--border); padding:56px 0; }
.related-title { font-size:13px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--red); margin-bottom:24px; }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); }
.related-card { background:#fff; padding:28px; transition:background 0.2s; text-decoration:none; color:var(--black); }
.related-card:hover { background:var(--gray-100); }
.related-card-cat { font-size:10px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--red); margin-bottom:10px; }
.related-card h4 { font-size:14px; font-weight:800; text-transform:uppercase; line-height:1.3; letter-spacing:-0.01em; }

/* FOOTER */
footer { background:#111111; padding:40px 48px; text-align:center; }
.footer-logo { font-size:22px; font-weight:900; letter-spacing:-0.02em; color:#fff; margin-bottom:8px; }
.footer-tagline { font-size:13px; color:rgba(255,255,255,0.4); margin-bottom:20px; }
.footer-links { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 28px; margin-bottom:20px; }
.footer-links a { font-size:12px; color:#6b7aff; text-decoration:none; }
.footer-links a:hover { color:#fff; }
.footer-req { font-size:11px; color:rgba(255,255,255,0.25); margin-bottom:8px; }
.footer-copy { font-size:11px; color:rgba(255,255,255,0.2); }
.footer-copy a { color:#6b7aff; text-decoration:none; }

@media(max-width:768px){
  nav { padding:0 16px; }
  .art-inner { padding:0 16px; }
  .art-hero { padding:40px 0 32px; }
  .related-grid { grid-template-columns:1fr; }
  footer { padding:32px 16px; }
}