/* IggyPlug blog — shares the design tokens used across the site */

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

:root {
  --black:#0a0a0a; --off-black:#111; --card:#1c1c1c; --card-hover:#222;
  --border:rgba(255,255,255,0.08); --border-hover:rgba(255,255,255,0.18);
  --white:#fff; --off-white:#f0ede6; --muted:rgba(255,255,255,0.45);
  --accent:#e8ff47; --accent-dark:#c4d830; --accent-dim:rgba(232,255,71,0.12);
  --pink:#ff6b9d; --pink-dim:rgba(255,107,157,0.12); --green:#5ddba0;
  --gradient:linear-gradient(135deg,#e8ff47 0%,#a8e820 50%,#5ddba0 100%);
  --font-display:'Bebas Neue',sans-serif; --font-body:'DM Sans',sans-serif;
}

html { scroll-behavior:smooth; }
body { background:var(--black); color:var(--white); font-family:var(--font-body); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; }

/* nav — matches tools.html exactly */
nav { position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:20px 60px; background:rgba(10,10,10,0.85); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); }
.logo { font-family:var(--font-display); font-size:28px; letter-spacing:2px; color:var(--white); text-decoration:none; }
.logo span { color:var(--accent); }
nav ul { display:flex; gap:32px; list-style:none; align-items:center; }
nav ul a { color:var(--muted); text-decoration:none; font-size:14px; font-weight:500; transition:color .2s; }
nav ul a:hover { color:var(--white); }
.nav-cta { background:var(--accent); color:var(--black)!important; padding:10px 24px; border-radius:100px; font-weight:600!important; }
.nav-cta:hover { background:var(--accent-dark)!important; }

.tag { display:inline-block; font-size:12px; letter-spacing:2.5px; text-transform:uppercase; font-weight:600; color:var(--accent); margin-bottom:14px; }

a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

/* article */
.wrap { max-width:760px; margin:0 auto; padding:0 22px; }
.post { padding-top:130px; }

.breadcrumb { font-size:13px; color:var(--muted); margin-bottom:26px; }
.breadcrumb a { color:var(--muted); }

.post h1 { font-family:var(--font-display); font-size:clamp(44px,8vw,76px); line-height:0.95; letter-spacing:1px; margin-bottom:22px; }

.post-meta { font-size:13.5px; color:var(--muted); padding-bottom:26px; margin-bottom:34px; border-bottom:1px solid var(--border); }

.standfirst { font-size:20px; line-height:1.6; color:var(--off-white); margin-bottom:40px; }

.post h2 { font-family:var(--font-display); font-size:38px; letter-spacing:1px; line-height:1.05; margin:56px 0 18px; }
.post h3 { font-size:19px; font-weight:600; margin:36px 0 12px; color:var(--white); }

.post p { margin-bottom:22px; color:var(--off-white); }
.post ul, .post ol { margin:0 0 22px 22px; color:var(--off-white); }
.post li { margin-bottom:10px; }
.post strong { color:var(--white); font-weight:600; }
.post code { background:var(--card); padding:2px 7px; border-radius:4px; font-size:14px; }

blockquote { margin:32px 0; padding:4px 0 4px 22px; border-left:3px solid var(--accent); color:var(--muted); }

table { width:100%; border-collapse:collapse; margin-bottom:28px; font-size:14.5px; }
th, td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--border); vertical-align:top; color:var(--off-white); }
th { color:var(--white); font-weight:600; background:var(--card); }

.callout { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:24px 26px; margin:36px 0; }
.callout p:last-child { margin-bottom:0; }
.callout .label { display:block; font-size:12px; letter-spacing:2.5px; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:10px; }

.cta-block { background:var(--accent-dim); border:1px solid rgba(232,255,71,0.28); border-radius:16px; padding:32px; margin:48px 0; }
.cta-block h3 { font-family:var(--font-display); font-size:30px; letter-spacing:1px; margin:0 0 14px; }
.cta-block p:last-of-type { margin-bottom:22px; }
.cta-button { display:inline-block; background:var(--accent); color:var(--black)!important; font-weight:600; padding:13px 28px; border-radius:100px; }
.cta-button:hover { background:var(--accent-dark); text-decoration:none; }

.related { border-top:1px solid var(--border); margin-top:56px; padding-top:26px; }
.related h3 { font-size:12px; letter-spacing:2.5px; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:14px; }
.related ul { list-style:none; margin-left:0; }

/* index */
.hero { padding:150px 0 20px; }
.hero h1 { font-family:var(--font-display); font-size:clamp(52px,10vw,92px); line-height:0.92; letter-spacing:1px; margin-bottom:18px; }
.hero p { font-size:19px; color:var(--muted); max-width:560px; }

.post-list { list-style:none; margin:30px 0 0; }
.post-list li { border-top:1px solid var(--border); padding:30px 0; }
.post-list h2 { font-family:var(--font-display); font-size:32px; letter-spacing:0.5px; line-height:1.1; margin-bottom:10px; }
.post-list h2 a { color:var(--white); }
.post-list h2 a:hover { color:var(--accent); text-decoration:none; }
.post-list .dek { color:var(--muted); font-size:15.5px; margin-bottom:8px; }
.post-list .date { font-size:12.5px; color:var(--muted); }

footer { border-top:1px solid var(--border); padding:44px 60px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; margin-top:70px; }
footer p { color:var(--muted); font-size:13.5px; }
footer a { color:var(--muted); }

@media (max-width:760px) {
  nav { padding:16px 22px; }
  .hide-m { display:none; }
  footer { padding:36px 22px; }
  .post { padding-top:110px; }
  .hero { padding:120px 0 10px; }
}