/* szbonyin.com — Magazine Style */
:root {
  --p: #d97706; --p-d: #92400e; --p-l: #fef3c7;
  --s: #1c1917; --s-l: #292524;
  --g: #78716c; --g-l: #fafaf9; --g-d: #e7e5e4;
  --w: #ffffff; --b: #1c1917;
  --font: 'Georgia', 'Times New Roman', serif;
  --font-s: -apple-system, 'Segoe UI', sans-serif;
  --mw: 1100px; --mw-n: 760px; --r: 16px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--font); color:var(--b); line-height:1.8; background:var(--g-l); }
a { color:#b45309; text-decoration:none; }
a:hover { color:var(--p-d); }
nav { background:var(--s); position:sticky; top:0; z-index:100; border-bottom:4px solid var(--p); padding:0 24px; }
nav .inner { max-width:var(--mw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; height:72px; }
nav .logo { font-size:26px; font-weight:900; color:var(--w); font-family:var(--font); letter-spacing:1px; text-transform:uppercase; }
nav .logo span { color:var(--p); }
nav .menu { display:flex; gap:6px; list-style:none; }
nav .menu a { display:block; padding:8px 20px; color:rgba(255,255,255,.75); font-size:14px; font-family:var(--font-s); text-transform:uppercase; letter-spacing:.5px; transition:.2s; }
nav .menu a:hover, nav .menu a.active { color:var(--w); background:rgba(255,255,255,.08); }
nav .menu a.cta { background:var(--p); color:var(--w); font-weight:700; }
nav .menu a.cta:hover { background:var(--p-d); }
nav .toggle { display:none; background:none; border:none; color:var(--w); font-size:28px; cursor:pointer; }
.hero { padding:64px 24px 48px; text-align:center; background:linear-gradient(180deg,var(--s),var(--sl)); border-bottom:6px solid var(--p); }
.hero h1 { font-size:48px; font-weight:900; color:var(--w); line-height:1.15; margin-bottom:16px; font-family:var(--font); }
.hero h1 span { color:var(--p); }
.hero p { font-size:17px; color:#a8a29e; max-width:620px; margin:0 auto 28px; font-family:var(--font-s); }
.hero .btn { display:inline-block; padding:14px 36px; background:var(--p); color:var(--w); border-radius:0; font-weight:700; font-size:15px; font-family:var(--font-s); text-transform:uppercase; letter-spacing:1px; transition:.2s; }
.hero .btn:hover { background:var(--p-d); }
.blog-wrap { max-width:var(--mw); margin:0 auto; padding:48px 24px; display:grid; grid-template-columns:1fr 300px; gap:48px; }
.section-title { font-size:28px; font-weight:900; font-family:var(--font); margin-bottom:32px; padding-bottom:12px; border-bottom:4px solid var(--p); text-transform:uppercase; letter-spacing:.5px; }
.post-card { background:var(--w); border-left:6px solid var(--p); padding:28px 32px; margin-bottom:24px; box-shadow:0 4px 12px rgba(0,0,0,.04); }
.post-card:hover { box-shadow:0 8px 24px rgba(0,0,0,.08); }
.post-card h2 { font-size:22px; margin-bottom:10px; font-family:var(--font); }
.post-card h2 a { color:var(--b); }
.post-card h2 a:hover { color:var(--p); }
.post-card .meta { font-size:13px; color:var(--g); margin-bottom:12px; font-family:var(--font-s); text-transform:uppercase; letter-spacing:.3px; }
.post-card .meta span { margin-right:20px; }
.post-card p { font-size:15px; color:#57534e; line-height:1.8; font-family:var(--font-s); }
.post-card .read-more { display:inline-block; margin-top:12px; font-size:13px; font-weight:700; font-family:var(--font-s); text-transform:uppercase; letter-spacing:.5px; color:var(--p); }
.pagination { display:flex; gap:8px; justify-content:center; margin-top:40px; }
.pagination a { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border:2px solid var(--g-d); font-size:14px; color:var(--b); font-weight:700; font-family:var(--font-s); transition:.2s; background:var(--w); }
.pagination a:hover, .pagination a.active { background:var(--p); color:var(--w); border-color:var(--p); }
.side-card { background:var(--w); border-top:4px solid var(--p); padding:24px; margin-bottom:24px; }
.side-card h3 { font-size:16px; font-weight:900; font-family:var(--font); text-transform:uppercase; letter-spacing:.5px; margin-bottom:16px; }
.side-card ul { list-style:none; }
.side-card li { padding:10px 0; border-bottom:1px solid var(--g-d); font-family:var(--font-s); font-size:14px; }
.side-card li:last-child { border:none; }
.side-card li a { color:var(--b); }
.side-card li a:hover { color:var(--p); }
.side-card p { font-family:var(--font-s); font-size:14px; color:#57534e; line-height:1.7; }
.article-page { max-width:var(--mw-n); margin:40px auto; padding:48px 40px; background:var(--w); border-left:6px solid var(--p); }
.article-page h1 { font-size:32px; font-weight:900; font-family:var(--font); margin-bottom:20px; }
.article-page .meta { font-size:14px; color:var(--g); margin-bottom:24px; padding-bottom:20px; border-bottom:2px solid var(--g-d); font-family:var(--font-s); }
.article-page .meta span { margin-right:24px; }
.article-page p { margin-bottom:20px; line-height:1.9; font-size:17px; }
.article-page .nav-links { display:flex; justify-content:space-between; margin-top:40px; padding-top:24px; border-top:2px solid var(--g-d); font-family:var(--font-s); font-weight:700; }
.about-page { max-width:var(--mw-n); margin:40px auto; padding:48px 40px; background:var(--w); border-left:6px solid var(--p); }
.about-page h1 { font-size:32px; font-weight:900; font-family:var(--font); }
.about-page p { margin-bottom:16px; line-height:1.9; font-size:17px; font-family:var(--font-s); }
footer { background:var(--s); padding:48px 24px 0; margin-top:60px; border-top:6px solid var(--p); }
footer .inner { max-width:var(--mw); margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; }
footer h4 { color:var(--w); font-size:15px; font-family:var(--font-s); text-transform:uppercase; letter-spacing:.5px; margin-bottom:12px; }
footer p, footer a { font-size:13px; color:#a8a29e; font-family:var(--font-s); line-height:2; }
footer a:hover { color:var(--p); }
footer .copy { text-align:center; padding:20px 0; margin-top:32px; border-top:1px solid rgba(255,255,255,.08); font-size:12px; color:#78716c; font-family:var(--font-s); }
@media(max-width:768px) {
  nav .menu { display:none; position:absolute; top:72px; left:0; right:0; background:var(--s); flex-direction:column; padding:8px; }
  nav .menu.open { display:flex; }
  nav .toggle { display:block; }
  .hero h1 { font-size:32px; }
  .blog-wrap { grid-template-columns:1fr; }
  .hero { padding:40px 16px 32px; }
  .article-page { padding:32px 24px; }
  footer .inner { grid-template-columns:1fr; }
}