:root { --primary-color:#8b4513; --secondary-color:#d4a017; --bg-cream:#fffbf0; --bg-light:#fff8dc; --text-dark:#1a1a1a; --text-brown:#5a2d0c; --border-gold:#d4a017; }
* { box-sizing:border-box; } html,body { min-height:100%; margin:0; }
body { background:linear-gradient(135deg,#f5f0e6 0%,#fffbf0 100%); color:var(--text-dark); font:400 16px/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.header { position:sticky; top:0; z-index:10; padding:18px 15px; text-align:center; background:linear-gradient(90deg,var(--primary-color),var(--secondary-color),var(--primary-color)); box-shadow:0 2px 10px rgba(0,0,0,.1); }
.site-title { display:inline-flex; flex-direction:column; color:#fff; text-decoration:none; line-height:1.25; }.site-title strong { font-size:1.8rem; letter-spacing:.5px; text-shadow:2px 2px 4px rgba(0,0,0,.3); }.site-title span { color:rgba(255,255,255,.9); font-size:.9rem; margin-top:4px; }
.nav-menu { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; padding:10px 15px; background:linear-gradient(135deg,#fff9e6,#fff5db); border-bottom:2px solid var(--border-gold); }.nav-link { display:inline-flex; align-items:center; padding:8px 16px; border:1px solid var(--border-gold); border-radius:20px; background:#fff; box-shadow:0 2px 4px rgba(0,0,0,.05); color:var(--primary-color); font-size:.85rem; font-weight:500; text-decoration:none; transition:all .2s ease; white-space:nowrap; }.nav-link:hover,.nav-link.active { border-color:var(--primary-color); background:linear-gradient(135deg,var(--primary-color),var(--secondary-color)); box-shadow:0 4px 8px rgba(0,0,0,.1); color:#fff; transform:translateY(-1px); }
.three-column-layout { display:grid; grid-template-columns:minmax(130px,200px) minmax(0,800px) minmax(130px,200px); gap:28px; max-width:1260px; min-height:calc(100vh - 160px); margin:0 auto; padding:28px 20px 42px; }.ad-rail { min-height:900px; }.content-column { min-width:0; }.page-intro { padding:26px 24px; border:2px solid var(--border-gold); border-radius:15px; background:linear-gradient(135deg,#fff9e6,#fffbf0); text-align:center; }.eyebrow { margin:0 0 8px; color:var(--secondary-color); font-size:.73rem; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; }.page-intro h1,.article-header h1 { margin:0 0 14px; color:var(--primary-color); font:600 clamp(1.75rem,4vw,2.35rem)/1.3 Lora,Georgia,serif; }.page-intro h1 em { color:var(--text-brown); }.page-intro > p:last-child { max-width:590px; margin:auto; color:#555; font-size:.95rem; }.ornament { display:flex; align-items:center; justify-content:center; gap:10px; margin:20px 0; color:var(--secondary-color); }.ornament i { display:block; width:68px; height:1px; background:rgba(212,160,23,.6); }
.blog-list { display:grid; gap:14px; }.loading,.load-error { padding:22px; border:1px solid #e8dcc8; border-radius:12px; background:#fff; color:#555; text-align:center; }.load-error strong { color:var(--text-brown); }.load-error a { color:var(--primary-color); font-weight:600; }.blog-card { display:grid; grid-template-columns:54px 1fr; gap:16px; padding:20px; border:1px solid #e8dcc8; border-radius:12px; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.06); transition:transform .2s,box-shadow .2s; }.blog-card:first-child { border:2px solid var(--border-gold); background:linear-gradient(135deg,#fff9e6,#fffbf0); }.blog-card:hover { box-shadow:0 7px 18px rgba(0,0,0,.11); transform:translateY(-2px); }.article-symbol { display:grid; width:48px; height:48px; place-items:center; border:1px solid var(--border-gold); border-radius:50%; background:var(--bg-light); color:var(--primary-color); font:1.35rem Lora,Georgia,serif; }.blog-card h2 { margin:0 0 7px; color:var(--primary-color); font:600 1.16rem/1.4 Lora,Georgia,serif; }.blog-card h2 a { color:inherit; text-decoration:none; }.blog-card h2 a:hover { color:var(--secondary-color); }.blog-card p:not(.article-meta) { margin:0 0 10px; color:#555; font-size:.89rem; line-height:1.65; }.article-meta { margin:0 0 5px; color:#a87511; font-size:.67rem; font-weight:700; letter-spacing:.9px; }.read-link,.back-link { color:var(--primary-color); font-size:.84rem; font-weight:600; text-decoration:none; }.read-link:hover,.back-link:hover { color:var(--secondary-color); text-decoration:underline; }
.article-page { padding:27px 30px 34px; border:2px solid var(--border-gold); border-radius:15px; background:linear-gradient(135deg,#fff9e6,#fffbf0); }.back-link { display:inline-block; margin-bottom:22px; }.article-header { text-align:center; }.article-symbol.large { width:58px; height:58px; margin:0 auto 13px; font-size:1.7rem; }.article-header h1 { font-size:clamp(1.8rem,4vw,2.45rem); }.article-lead { max-width:650px; margin:auto; color:#555; font:italic 1rem/1.75 Lora,Georgia,serif; }.article-body { max-width:670px; margin:auto; }.article-body h2 { margin:28px 0 8px; color:var(--text-brown); font:600 1.3rem Lora,Georgia,serif; }.article-body h3 { color:var(--primary-color); font:600 1.05rem Lora,Georgia,serif; }.article-body p,.article-body li { color:#444; font-size:.95rem; line-height:1.8; }.article-body img { width:100%; height:auto; border-radius:10px; margin:10px 0 18px; }.article-body aside { margin:30px 0; padding:16px 18px; border-left:4px solid var(--secondary-color); border-radius:0 8px 8px 0; background:#fff; color:#555; font-size:.86rem; line-height:1.65; }.article-body hr { border:0; border-top:1px solid rgba(212,160,23,.35); margin:28px 0; }.article-body a { color:var(--primary-color); } footer { padding:20px; border-top:2px solid var(--border-gold); background:var(--bg-cream); color:#666; font-size:.82rem; text-align:center; } footer a { color:var(--text-brown); text-decoration:none; }
@media (max-width:980px) { .three-column-layout { grid-template-columns:1fr; max-width:830px; }.ad-rail { display:none; } } @media (max-width:600px) { .header { padding:15px 12px; }.site-title strong { font-size:1.45rem; }.site-title span { font-size:.78rem; }.nav-menu { gap:5px; padding:8px; }.nav-link { padding:6px 10px; font-size:.72rem; }.three-column-layout { padding:18px 12px 30px; }.page-intro { padding:22px 16px; }.blog-card { grid-template-columns:44px 1fr; gap:12px; padding:16px; }.article-symbol { width:42px; height:42px; font-size:1.15rem; }.blog-card h2 { font-size:1.04rem; }.article-page { padding:22px 18px 28px; }.article-body p,.article-body li { font-size:.92rem; } }