/* FlexyGist — Premium Editorial Design */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Source+Serif+4:ital,wght@0,300;0,400;0,600;1,400&family=DM+Sans:wght@400;500;600&display=swap');

:root {
  --bg:       #0a0c0f;
  --bg2:      #111318;
  --bg3:      #181c23;
  --border:   #1e2330;
  --border2:  #252b3a;
  --accent:   #e8953a;
  --accent2:  #d4782a;
  --accent3:  #f5b46a;
  --text:     #e8ecf2;
  --text2:    #b8c2d0;
  --muted:    #6b7585;
  --card:     #0f1219;
  --card2:    #131720;
  --green:    #3db87a;
  --radius:   8px;
  --radius-lg:14px;
  --serif:    'Playfair Display', Georgia, serif;
  --body:     'Source Serif 4', Georgia, serif;
  --sans:     'DM Sans', system-ui, sans-serif;
  --mono:     'Cascadia Code', 'Fira Mono', monospace;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: var(--body); font-size: 16px; line-height: 1.75; min-height: 100vh; }
a { color: var(--accent); text-decoration: none; transition: color .2s; }
a:hover { color: var(--accent3); }
img { max-width: 100%; height: auto; display: block; }
.container { max-width: 1160px; margin: 0 auto; padding: 0 1.5rem; }

/* Scroll progress */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--accent); z-index: 9999; width: 0%; transition: width .1s; }

/* Top Bar */
.top-bar { background: var(--bg2); border-bottom: 1px solid var(--border); padding: .4rem 0; font-family: var(--sans); font-size: .73rem; color: var(--muted); }
.top-bar-inner { display: flex; justify-content: space-between; align-items: center; }
.top-bar a { color: var(--muted); }
.top-bar a:hover { color: var(--accent); }
.top-bar-left { display: flex; gap: 1.5rem; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); display: inline-block; animation: pulse 2s infinite; vertical-align: middle; margin-right: .3rem; }
@keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:.35 } }

/* Header */
.site-header { border-bottom: 1px solid var(--border); background: rgba(10,12,15,.97); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 200; }
.header-main { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: .85rem 0; flex-wrap: wrap; }
.site-brand { display: flex; align-items: baseline; gap: .4rem; color: var(--text); }
.brand-name { font-family: var(--serif); font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; color: var(--text); line-height: 1; }
.brand-name span { color: var(--accent); }
.brand-tag { font-family: var(--sans); font-size: .68rem; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.header-nav { display: flex; align-items: center; gap: .2rem; flex-wrap: wrap; }
.header-nav a { font-family: var(--sans); font-size: .82rem; font-weight: 500; color: var(--text2); padding: .35rem .75rem; border-radius: 6px; transition: all .18s; }
.header-nav a:hover { background: var(--bg3); color: var(--text); }
.header-nav .nav-rss { border: 1px solid var(--border2); color: var(--muted); font-size: .73rem; }
.header-nav .nav-rss:hover { border-color: var(--accent); color: var(--accent); background: transparent; }

/* Cat Strip */
.cat-strip { border-bottom: 1px solid var(--border); background: var(--bg2); overflow-x: auto; scrollbar-width: none; }
.cat-strip::-webkit-scrollbar { display: none; }
.cat-strip-inner { display: flex; white-space: nowrap; }
.cat-strip a { font-family: var(--sans); font-size: .75rem; font-weight: 600; color: var(--muted); padding: .6rem 1rem; border-right: 1px solid var(--border); transition: all .18s; text-transform: uppercase; letter-spacing: .06em; }
.cat-strip a:hover, .cat-strip a.active { color: var(--accent); background: var(--bg3); }

/* Breaking bar */
.breaking-bar { background: var(--accent); padding: .45rem 0; overflow: hidden; }
.breaking-bar-inner { display: flex; align-items: center; gap: 1rem; }
.breaking-label { font-family: var(--sans); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; background: rgba(0,0,0,.2); color: #fff; padding: .18rem .65rem; border-radius: 3px; white-space: nowrap; flex-shrink: 0; }
.ticker-wrap { overflow: hidden; flex: 1; }
.ticker-text { display: inline-block; animation: ticker 45s linear infinite; font-family: var(--sans); font-size: .78rem; color: rgba(255,255,255,.9); }
@keyframes ticker { 0% { transform: translateX(100%) } 100% { transform: translateX(-100%) } }

/* Layout */
.content-layout { display: grid; grid-template-columns: 1fr 300px; gap: 3rem; padding: 2.5rem 0; }
.content-layout--post { grid-template-columns: 1fr 280px; }
@media (max-width: 900px) { .content-layout, .content-layout--post { grid-template-columns: 1fr; } }

/* Hero Featured */
.hero-featured { margin: 2rem 0 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border2); background: var(--card2); display: grid; grid-template-columns: 1fr 45%; min-height: 320px; }
@media (max-width: 700px) { .hero-featured { grid-template-columns: 1fr; } }
.hero-img { position: relative; overflow: hidden; background: var(--bg3); min-height: 220px; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.hero-img:hover img { transform: scale(1.04); }
.hero-img-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--bg3) 0%, var(--border2) 100%); display: flex; align-items: center; justify-content: center; font-size: 3rem; opacity: .25; }
.hero-body { padding: 2rem 1.75rem; display: flex; flex-direction: column; justify-content: center; }
.hero-label { font-family: var(--sans); font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); margin-bottom: .65rem; display: flex; align-items: center; gap: .4rem; }
.hero-label::before { content: ''; display: inline-block; width: 16px; height: 2px; background: var(--accent); }
.hero-body h1 { font-family: var(--serif); font-size: 1.65rem; font-weight: 700; line-height: 1.25; margin-bottom: .85rem; letter-spacing: -.02em; }
.hero-body h1 a { color: var(--text); }
.hero-body h1 a:hover { color: var(--accent); }
.hero-excerpt { color: var(--text2); font-size: .9rem; font-style: italic; margin-bottom: 1.1rem; line-height: 1.65; }
.hero-meta { display: flex; align-items: center; gap: .65rem; margin-bottom: 1rem; flex-wrap: wrap; }
.hero-meta time, .hero-meta .reading-time { font-family: var(--sans); font-size: .75rem; color: var(--muted); }
.btn-read { display: inline-flex; align-items: center; gap: .4rem; background: var(--accent); color: #fff; padding: .5rem 1.1rem; border-radius: 6px; font-family: var(--sans); font-size: .82rem; font-weight: 600; transition: background .2s; align-self: flex-start; }
.btn-read:hover { background: var(--accent2); color: #fff; }
.btn-read::after { content: '→'; }

/* Section Header */
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; padding-bottom: .65rem; border-bottom: 2px solid var(--border2); }
.section-title { font-family: var(--sans); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); display: flex; align-items: center; gap: .45rem; }
.section-title::before { content: ''; width: 3px; height: 13px; background: var(--accent); border-radius: 2px; display: inline-block; }
.section-see-all { font-family: var(--sans); font-size: .73rem; color: var(--muted); }
.section-see-all:hover { color: var(--accent); }

/* POST LIST — thumbnail left, title right */
.post-list { display: flex; flex-direction: column; }
.post-list-item { display: flex; align-items: flex-start; gap: .9rem; padding: .85rem 0; border-bottom: 1px solid var(--border); }
.post-list-item:last-child { border-bottom: none; }
.post-thumb { flex-shrink: 0; width: 96px; height: 66px; border-radius: 6px; overflow: hidden; background: var(--bg3); }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.post-list-item:hover .post-thumb img { transform: scale(1.07); }
.post-thumb-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--bg3) 0%, var(--border2) 100%); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 1.4rem; opacity: .45; }
.post-info { flex: 1; min-width: 0; }
.post-cat-row { display: flex; align-items: center; gap: .45rem; margin-bottom: .25rem; }
.cat-pill { font-family: var(--sans); font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); background: rgba(232,149,58,.1); padding: .13rem .45rem; border-radius: 3px; }
.post-date-small { font-family: var(--sans); font-size: .68rem; color: var(--muted); }
.post-info h3 { font-family: var(--serif); font-size: 1rem; font-weight: 600; line-height: 1.35; margin-bottom: .3rem; letter-spacing: -.01em; }
.post-info h3 a { color: var(--text); }
.post-info h3 a:hover { color: var(--accent); }
.post-info p { font-family: var(--sans); font-size: .8rem; color: var(--text2); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-reading { font-family: var(--sans); font-size: .68rem; color: var(--muted); margin-top: .3rem; }

/* Category Page */
.cat-page-header { margin: 2rem 0 0; padding-bottom: 1.5rem; border-bottom: 2px solid var(--border2); }
.cat-page-label { font-family: var(--sans); font-size: .7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .3rem; }
.cat-page-title { font-family: var(--serif); font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em; }

/* Sidebar */
.sidebar { padding-top: .5rem; }
.widget { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem; margin-bottom: 1.2rem; }
.widget-title { font-family: var(--sans); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: .9rem; padding-bottom: .55rem; border-bottom: 1px solid var(--border); }

/* Sidebar Post */
.sidebar-post { display: flex; gap: .7rem; align-items: flex-start; padding: .65rem 0; border-bottom: 1px solid var(--border); }
.sidebar-post:last-child { border-bottom: none; }
.sidebar-thumb { flex-shrink: 0; width: 58px; height: 42px; border-radius: 5px; overflow: hidden; background: var(--bg3); }
.sidebar-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-thumb-placeholder { width: 100%; height: 100%; background: var(--bg3); display: flex; align-items: center; justify-content: center; font-size: .85rem; opacity: .4; }
.sidebar-post-info a { font-family: var(--sans); font-size: .8rem; font-weight: 500; color: var(--text); display: block; line-height: 1.35; margin-bottom: .2rem; }
.sidebar-post-info a:hover { color: var(--accent); }
.sidebar-post-info time { font-family: var(--sans); font-size: .68rem; color: var(--muted); }

/* Cat List */
.cat-list { list-style: none; }
.cat-list li { border-bottom: 1px solid var(--border); }
.cat-list li:last-child { border: none; }
.cat-list a { display: flex; justify-content: space-between; align-items: center; padding: .5rem 0; font-family: var(--sans); font-size: .86rem; color: var(--text2); }
.cat-list a:hover { color: var(--accent); }
.cat-list a.active { color: var(--accent); font-weight: 600; }
.count { background: var(--bg3); color: var(--muted); font-size: .66rem; padding: .1rem .4rem; border-radius: 3px; font-family: var(--sans); }

.btn-sub { display: block; text-align: center; border: 1px solid var(--accent); color: var(--accent); padding: .5rem; border-radius: 6px; font-family: var(--sans); font-size: .82rem; font-weight: 600; margin-top: .65rem; transition: all .2s; }
.btn-sub:hover { background: var(--accent); color: #fff; }

/* Category Badge */
.cat-badge { display: inline-block; background: rgba(232,149,58,.12); color: var(--accent); font-family: var(--sans); font-size: .66rem; font-weight: 700; padding: .18rem .5rem; border-radius: 3px; letter-spacing: .06em; text-transform: uppercase; }
.cat-badge a { color: var(--accent); }

/* Pagination */
.pagination { display: flex; justify-content: center; align-items: center; gap: .5rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.page-btn { border: 1px solid var(--border2); color: var(--text2); padding: .48rem .95rem; border-radius: 6px; font-family: var(--sans); font-size: .8rem; transition: all .18s; }
.page-btn:hover { border-color: var(--accent); color: var(--accent); }
.pagination span { font-family: var(--sans); font-size: .8rem; color: var(--muted); padding: .48rem .65rem; }

/* Breadcrumb */
.breadcrumb { padding: 1.2rem 0 0; }
.breadcrumb ol { display: flex; gap: .4rem; list-style: none; font-family: var(--sans); font-size: .75rem; flex-wrap: wrap; }
.breadcrumb li { color: var(--muted); }
.breadcrumb li a { color: var(--muted); }
.breadcrumb li a:hover { color: var(--accent); }
.breadcrumb li + li::before { content: '/'; margin-right: .4rem; color: var(--border2); }
.breadcrumb li:last-child { color: var(--text2); }

/* Single Post */
.post-header { margin: 1.5rem 0 2rem; }
.post-meta { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; flex-wrap: wrap; }
.post-meta time, .reading-time, .source-link { font-family: var(--sans); font-size: .76rem; color: var(--muted); }
.source-link { border: 1px solid var(--border); padding: .14rem .5rem; border-radius: 4px; }
.source-link:hover { border-color: var(--accent); color: var(--accent); }
.post-title { font-family: var(--serif); font-size: 2.1rem; font-weight: 700; line-height: 1.2; margin-bottom: .9rem; letter-spacing: -.03em; }
.post-excerpt { font-family: var(--body); color: var(--text2); font-size: 1.05rem; font-style: italic; border-left: 3px solid var(--accent); padding-left: 1rem; line-height: 1.7; }
.post-hero-img { margin: 1.5rem 0; border-radius: var(--radius-lg); overflow: hidden; max-height: 420px; }
.post-hero-img img { width: 100%; height: 100%; object-fit: cover; }

.tldr-box { background: rgba(232,149,58,.07); border: 1px solid rgba(232,149,58,.25); border-radius: var(--radius); padding: 1.2rem 1.4rem; margin: 1.5rem 0; }
.tldr-box strong { font-family: var(--sans); color: var(--accent); display: block; margin-bottom: .5rem; font-size: .77rem; text-transform: uppercase; letter-spacing: .08em; }
.tldr-box ul { padding-left: 1.2rem; }
.tldr-box li { color: var(--text2); font-size: .93rem; margin-bottom: .25rem; }

.post-body { line-height: 1.9; font-family: var(--body); }
.post-body h2 { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; margin: 2rem 0 .75rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border); letter-spacing: -.02em; }
.post-body h3 { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; margin: 1.65rem 0 .5rem; }
.post-body p { margin-bottom: 1.15rem; color: var(--text2); }
.post-body ul, .post-body ol { padding-left: 1.5rem; margin-bottom: 1rem; color: var(--text2); }
.post-body li { margin-bottom: .35rem; }
.post-body blockquote { border-left: 3px solid var(--accent); padding-left: 1.1rem; margin: 1.4rem 0; color: var(--text2); font-style: italic; }
.post-body code { background: var(--bg3); padding: .14rem .4rem; border-radius: 4px; font-family: var(--mono); font-size: .84em; color: var(--accent3); }
.post-body pre { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem; overflow-x: auto; margin: 1.4rem 0; }
.post-body pre code { background: none; padding: 0; color: var(--text); }
.post-body strong { color: var(--text); font-weight: 600; }
.post-body a { color: var(--accent); }

.post-footer-meta { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--border); font-family: var(--sans); font-size: .78rem; color: var(--muted); display: flex; gap: 1rem; flex-wrap: wrap; }
.post-footer-meta strong { color: var(--text2); }

.faq-section { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.faq-section h2 { font-family: var(--serif); font-size: 1.4rem; font-weight: 700; margin-bottom: .9rem; }
.faq-section h3 { color: var(--accent); font-family: var(--sans); font-size: .93rem; font-weight: 600; margin: 1.2rem 0 .35rem; }

.post-tags { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .45rem; }
.tag { background: var(--bg3); border: 1px solid var(--border2); color: var(--text2); font-family: var(--sans); font-size: .73rem; padding: .22rem .6rem; border-radius: 20px; transition: all .18s; }
.tag:hover { border-color: var(--accent); color: var(--accent); }

/* Author Card */
.author-card { margin-top: 2rem; background: var(--card2); border: 1px solid var(--border2); border-radius: var(--radius); padding: 1.2rem; display: flex; gap: 1rem; align-items: flex-start; }
.author-avatar { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 1.25rem; font-weight: 700; color: #fff; flex-shrink: 0; }
.author-info h4 { font-family: var(--sans); font-size: .88rem; font-weight: 600; margin-bottom: .15rem; }
.author-role { font-family: var(--sans); font-size: .67rem; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .25rem; }
.author-info p { font-family: var(--sans); font-size: .78rem; color: var(--text2); line-height: 1.5; }

/* Related */
.related-item { padding: .65rem 0; border-bottom: 1px solid var(--border); }
.related-item:last-child { border: none; }
.related-item a { font-family: var(--sans); color: var(--text); font-size: .86rem; display: block; margin-bottom: .2rem; line-height: 1.35; font-weight: 500; }
.related-item a:hover { color: var(--accent); }
.related-item time { font-family: var(--sans); font-size: .7rem; color: var(--muted); }

/* Footer */
.site-footer { border-top: 1px solid var(--border); background: var(--bg2); margin-top: 3rem; padding: 2.5rem 0 1.5rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand p { font-family: var(--sans); font-size: .8rem; color: var(--muted); margin-top: .65rem; line-height: 1.6; }
.footer-col h5 { font-family: var(--sans); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: .8rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: .4rem; }
.footer-col a { font-family: var(--sans); font-size: .8rem; color: var(--text2); }
.footer-col a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid var(--border); padding-top: 1.2rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.footer-bottom p { font-family: var(--sans); font-size: .76rem; color: var(--muted); }
.footer-disclaimer { font-size: .7rem; opacity: .6; font-style: italic; font-family: var(--sans); color: var(--muted); }
.footer-social { display: flex; gap: .65rem; }
.footer-social a { font-family: var(--sans); font-size: .73rem; color: var(--muted); padding: .28rem .6rem; border: 1px solid var(--border2); border-radius: 5px; }
.footer-social a:hover { border-color: var(--accent); color: var(--accent); }

/* Misc */
.empty-state { font-family: var(--sans); color: var(--muted); text-align: center; padding: 3rem; }
@media (max-width: 600px) { .post-thumb { width: 76px; height: 56px; } .post-title { font-size: 1.6rem; } .brand-name { font-size: 1.3rem; } .content-layout { padding: 1.5rem 0; } }