@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
/* ═══════════════════════════════════════════
   RULEFORGE — ARTICLE STYLESHEET v2
   Dark premium theme. All articles inherit this.
   ═══════════════════════════════════════════ */

:root {
  --bg: #08090a;
  --surface: rgba(255,255,255,0.025);
  --surface-2: rgba(255,255,255,0.045);
  --border: rgba(255,255,255,0.06);
  --border-hover: rgba(255,255,255,0.12);
  --text: #e8eaed;
  --text-dim: #8b8d93;
  --text-faint: #5a5c63;
  --accent: #f59e0b;
  --accent-dim: rgba(245,158,11,0.08);
  --accent-glow: rgba(245,158,11,0.15);
  --green: #10b981;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius: 12px;
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
  font-size:18px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* ── Atmosphere ── */
body::before{
  content:'';
  position:fixed;
  inset:0;
  background:
    radial-gradient(ellipse 600px 400px at 15% 10%, rgba(245,158,11,0.06), transparent 70%),
    radial-gradient(ellipse 500px 400px at 85% 90%, rgba(99,102,241,0.04), transparent 70%);
  pointer-events:none;
  z-index:0;
}
body::after{
  content:'';
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 30%,black 20%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 30%,black 20%,transparent 100%);
  pointer-events:none;
  z-index:0;
}

/* ── Links ── */
a{color:var(--accent);text-decoration:none;transition:opacity .2s}
a:hover{opacity:0.8}

/* ── RF Icon System ── */
.rf-ic{display:inline-block;width:1em;height:1em;vertical-align:-0.125em;fill:none;stroke:currentColor;stroke-width:2;flex-shrink:0}
.rf-ic path[fill="currentColor"],.rf-ic polygon[fill="currentColor"],.rf-ic circle[fill="currentColor"]{stroke:none}
.rf-arrow{width:0.85em;height:0.85em;vertical-align:0;margin-left:0.15em}

/* ── Header / Nav ── */
header.site{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(8,9,10,0.7);
  backdrop-filter:blur(20px) saturate(1.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  border-bottom:1px solid var(--border);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:64px;
  max-width:1000px;
  margin:0 auto;
  padding:0 24px;
}
.nav .brand{
  color:#fff;
  font-weight:900;
  font-size:20px;
  letter-spacing:-0.04em;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:8px;
}
.nav .brand span{color:var(--accent)}
.nav .brand::before{
  content:'R';
  width:28px;
  height:28px;
  border-radius:7px;
  background:linear-gradient(135deg,var(--accent),#d97706);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  color:#08090a;
  font-weight:900;
}
.nav .links{display:flex;gap:28px}
.nav .links a{
  color:var(--text-dim);
  font-size:14px;
  font-weight:500;
  text-decoration:none;
  transition:color .2s;
  letter-spacing:-0.01em;
}
.nav .links a:hover{color:#fff;opacity:1}

/* ── Layout ── */
.wrap{
  max-width:760px;
  margin:0 auto;
  padding:0 24px;
  position:relative;
  z-index:1;
}
.wrap-wide{
  max-width:1000px;
  margin:0 auto;
  padding:0 24px;
  position:relative;
  z-index:1;
}

/* ── Article ── */
article{padding:64px 0 80px}
article h1{
  font-size:clamp(30px,5vw,44px);
  line-height:1.08;
  letter-spacing:-0.04em;
  margin-bottom:12px;
  font-weight:900;
  color:#fff;
}
.meta{
  color:var(--text-faint);
  font-size:14px;
  margin-bottom:36px;
  padding-bottom:28px;
  border-bottom:1px solid var(--border);
}
article h2{
  font-size:clamp(24px,3.5vw,30px);
  margin:48px 0 16px;
  letter-spacing:-0.03em;
  font-weight:800;
  color:#fff;
  line-height:1.2;
}
article h3{
  font-size:21px;
  margin:32px 0 12px;
  font-weight:700;
  color:#fff;
  letter-spacing:-0.02em;
}
article p{margin-bottom:20px}
article ul,article ol{margin:0 0 24px 24px}
article li{margin-bottom:10px}
article strong{color:#fff;font-weight:600}
article blockquote{
  border-left:3px solid var(--accent);
  background:var(--accent-dim);
  padding:20px 24px;
  border-radius:0 12px 12px 0;
  margin:28px 0;
  font-style:italic;
  color:var(--text);
}

/* ── Example Boxes ── */
article .example{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
  margin:24px 0;
  transition:border-color .2s;
}
article .example:hover{border-color:var(--border-hover)}
article .example-label{
  font-size:12px;
  font-weight:700;
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin-bottom:10px;
  display:flex;
  align-items:center;
  gap:6px;
}
article .example-label .rf-ic{color:var(--accent);width:0.9em;height:0.9em}

/* ── CTA Box ── */
.cta-box{
  background:linear-gradient(135deg,rgba(245,158,11,0.06),rgba(245,158,11,0.02));
  border:1px solid rgba(245,158,11,0.12);
  border-radius:16px;
  padding:36px;
  margin:48px 0;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.cta-box::before{
  content:'';
  position:absolute;
  top:-50%;
  left:50%;
  transform:translateX(-50%);
  width:200%;
  height:200%;
  background:radial-gradient(ellipse at center,rgba(245,158,11,0.04),transparent 60%);
  pointer-events:none;
}
.cta-box h3{
  color:#fff;
  font-size:22px;
  margin-bottom:10px;
  font-weight:800;
  letter-spacing:-0.02em;
  position:relative;
}
.cta-box p{
  color:var(--text-dim);
  font-size:16px;
  margin-bottom:22px;
  position:relative;
}
.cta-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--accent);
  color:#08090a;
  font-weight:700;
  font-size:16px;
  padding:14px 32px;
  border-radius:10px;
  text-decoration:none;
  transition:all .25s;
  position:relative;
}
.cta-btn:hover{
  background:#fff;
  color:#08090a;
  transform:translateY(-2px);
  box-shadow:0 8px 28px var(--accent-glow);
  opacity:1;
}

/* ── Homepage Hero (legacy compat) ── */
.hero{text-align:center;padding:100px 0 60px}
.hero h1{font-size:clamp(36px,6vw,60px);font-weight:900;letter-spacing:-0.045em;color:#fff;margin-bottom:20px}
.hero p{color:var(--text-dim);max-width:560px;margin:0 auto 32px}

/* ── Scroll Reveal (for articles) ── */
article h1,article h2,article .example,article blockquote,article .cta-box,article p,article ul,article ol{
  animation:fadeUp .6s cubic-bezier(0.16,1,0.3,1) both;
}
article h2{animation-delay:.05s}
article p:nth-of-type(1){animation-delay:.1s}
article p:nth-of-type(2){animation-delay:.15s}
article p:nth-of-type(3){animation-delay:.2s}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ── Responsive ── */
@media(max-width:600px){
  body{font-size:17px}
  article{padding:40px 0 60px}
  article h1{font-size:30px}
  article h2{font-size:24px;margin:36px 0 14px}
  .cta-box{padding:24px;margin:32px 0}
  .nav .links a:not(:last-child){display:none}
}