:root{--accent:#6eb48c;--text:#313131;--dark:#2b2b2b;--muted:#888;--line:#dedede;--serif:"PT Serif",Georgia,"Times New Roman",Times,serif;--sans:Raleway,"Helvetica Neue",Helvetica,Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:14px/1.8 var(--serif);color:var(--text);background:#fff;-webkit-font-smoothing:antialiased}
a{color:var(--text);text-decoration:none;transition:color .2s}
a:hover{color:var(--accent)}
img{max-width:100%;height:auto}
.container{max-width:1170px;margin:0 auto;padding:0 15px}
.container.narrow{max-width:1000px}
#navigation{background:var(--dark);position:sticky;top:0;z-index:50;box-shadow:0 1px 4px rgba(0,0,0,.1)}
#navigation .container{display:flex;justify-content:center}
.menu{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center}
.menu li a{display:block;color:#fff;font:700 12px/60px var(--sans);text-transform:uppercase;letter-spacing:1px;padding:0 10px}
.menu li a:hover,.menu li.current-menu-item a{color:var(--accent)}
.nav-toggle,.nav-toggle-label{display:none}
#header{background:#f5f5f5;padding:48px 0 34px;text-align:center}
#logo a{display:inline-flex;align-items:center;gap:12px;color:var(--text)}
.logo-text{font:400 34px/1 var(--serif);letter-spacing:3px}
.header-slogan{margin-top:24px;display:flex;align-items:center;justify-content:center;gap:16px;font-style:italic;font-weight:700;font-size:14px}
.header-slogan:before,.header-slogan:after{content:"";width:60px;height:1px;background:var(--text)}
#main{padding:50px 0 60px}
.featured-hero{position:relative;margin-bottom:60px}
.hero-img img{display:block;width:100%;height:500px;object-fit:cover}
.hero-text{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.6);color:#fff;text-align:center;padding:20px 30px;max-width:420px;width:90%}
.hero-text a,.hero-text{color:#fff}
.hero-text .cat{font-size:13px}
.hero-title{font:700 24px/1.3 var(--sans);text-transform:uppercase;letter-spacing:1px;margin:6px 0}
.hero-meta{font-size:13px}
.hero-meta .sep,.post-box-meta .sep{margin:0 12px;opacity:.6}
.section-title{text-align:center;border-bottom:1px solid var(--text);margin:0 0 30px;position:relative}
.section-title h3{display:inline-block;margin:0;font:700 25px/1.6 var(--sans);text-transform:uppercase;letter-spacing:1px;position:relative;padding-bottom:4px}
.section-title h3:after{content:"";position:absolute;left:50%;bottom:-2px;width:40px;margin-left:-20px;height:3px;background:var(--accent)}
.home-cat{margin-bottom:50px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 30px}
.grid-item .thumb{display:block;overflow:hidden;aspect-ratio:3/2;background:#eee}
.grid-item .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.grid-item:hover .thumb img{transform:scale(1.05)}
.grid-title{font:700 15px/1.4 var(--sans);margin:16px 0 4px}
.grid-meta{margin:0;font-size:13px}
.grid-meta .author{color:var(--text)}
.thumb-ph{display:block;width:100%;height:100%;background:#eee}
.archive-box{text-align:center;margin-bottom:40px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.archive-box span{font-size:13px;font-style:italic;color:var(--muted)}
.archive-box h1{margin:4px 0 0;font:700 24px/1.3 var(--sans);text-transform:uppercase;letter-spacing:1px}
.cat-desc{text-align:center;margin:-20px 0 30px}
.pagination{display:flex;justify-content:center;gap:20px;margin-top:50px;font:700 12px var(--sans);text-transform:uppercase;letter-spacing:1px}
.single{margin-bottom:60px}
.post-header{text-align:center;margin-bottom:26px}
.post-header .cat{font-size:13px}
.post-header .cat a{color:var(--accent)}
.post-header .dot{margin:0 6px}
.post-title{font:700 24px/1.3 var(--sans);text-transform:uppercase;letter-spacing:1px;margin:6px 0 8px}
.post-box-meta{font-size:13px;color:var(--muted)}
.post-image{margin:0 0 30px}
.post-image img{width:100%;max-height:640px;object-fit:cover;display:block}
.entry{font-size:15px;line-height:1.8}
.entry p{margin:0 0 17px}
.entry a{color:var(--accent)}
.entry a:hover{text-decoration:underline}
.entry h1,.entry h2,.entry h3,.entry h4{font-family:var(--sans);font-weight:700;line-height:1.35;margin:30px 0 14px;letter-spacing:.5px}
.entry h1{font-size:24px}.entry h2{font-size:21px}.entry h3{font-size:18px}.entry h4{font-size:16px}
.entry ul,.entry ol{padding-left:22px;margin:0 0 17px}
.entry figure{margin:0 0 20px}
.entry img{display:inline-block}
.entry iframe{max-width:100%}
.aligncenter{display:block;margin:0 auto 20px;text-align:center}
.alignleft{float:left;margin:5px 22px 15px 0}
.alignright{float:right;margin:5px 0 15px 22px}
.caption{font-size:13px;font-style:italic;color:var(--muted);text-align:center;margin:6px 0 0}
.entry::after{content:"";display:table;clear:both}
.toc{display:inline-block;min-width:260px;max-width:100%;border:1px solid var(--line);background:#f9f9f9;padding:12px 22px 10px;margin:4px 0 22px}
.toc .toc-title{font:700 14px var(--sans);text-transform:uppercase;letter-spacing:1px;margin:0 0 6px;text-align:center}
.toc ul{list-style:none;padding-left:0;margin:0;font-size:14px}
.toc ul ul{padding-left:16px}
.toc a{color:var(--text)}
.post-tags{margin-top:30px}
.post-tags a,.post-tags span{display:inline-block;border:1px solid var(--line);font:700 11px var(--sans);text-transform:uppercase;letter-spacing:1px;padding:4px 10px;margin:0 6px 6px 0}
.notebox{border-left:3px solid var(--accent);background:#f6faf8;padding:14px 18px;margin:0 0 20px}
.notebox-title{font:700 13px var(--sans);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
#footer-section{background:#313131;color:#999;text-align:center;padding:40px 0 34px}
.footer-copy{margin:0 0 14px}
.go-to-top{color:#fff;font:700 12px var(--sans);text-transform:uppercase;letter-spacing:2px}
@media (max-width:960px){.grid{grid-template-columns:repeat(2,1fr)}.hero-img img{height:380px}}
@media (max-width:767px){
 #navigation .container{justify-content:flex-start}
 .nav-toggle-label{display:flex;align-items:center;gap:4px;flex-direction:column;justify-content:center;height:50px;cursor:pointer;color:#fff}
 .nav-toggle-label span{display:block;width:22px;height:2px;background:#fff}
 .nav-toggle-label em{display:none}
 .menu{display:none;flex-direction:column;width:100%;position:absolute;left:0;top:50px;background:var(--dark);padding-bottom:10px}
 .menu li a{line-height:40px;padding:0 20px}
 .nav-toggle:checked ~ .menu{display:flex}
 #header{padding:30px 0 24px}.logo-text{font-size:26px}
 .grid{grid-template-columns:1fr}
 .hero-img img{height:300px}
 .alignleft,.alignright{float:none;margin:0 auto 15px;display:block}
}