:root{
  --blue-main:#0c4fb2;
  --blue-dark:#083b86;
  --blue-soft:#eaf2ff;
  --text-main:#1e1e1e;
  --line:#cfd7e6;
  --green-soft:#a9e1a6;
  --red-soft:#eda1a1;
  --preview-soft:#b9d7e5;
  --gray-soft:#d9d9d9;
  --white:#fff;
  --muted:#555;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:#f5f7fb;
  color:var(--text-main);
  font-family:"Playfair Display",serif;
}
a{text-decoration:none;color:inherit}
img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--line);
}
h1,h2,h3,h4,button,label{
  font-family:"Montserrat",sans-serif;
}
.top-strip,.site-nav,.nav-menu,.story-category,.article-category,.article-tags{
  font-family:"Roboto Mono",monospace;
}
.site-header{
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.top-strip{
  background:var(--blue-dark);
  color:var(--white);
  padding:.45rem 1rem;
}
.top-strip p{
  display:inline-block;
  width:49%;
  margin:0;
  font-size:.8rem;
}
.branding{padding:1rem 0}
.site-logo{
  margin:0 0 .7rem 0;
  color:var(--blue-dark);
  font-size:2rem;
  font-weight:800;
}
.site-search input{
  width:100%;
  max-width:320px;
  padding:.65rem;
  border:1px solid var(--line);
  background:var(--white);
}
.sub-header{
  background:#f2f4f8;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.sub-header-inner{padding:.55rem 0}
.sub-search,.sub-actions{
  display:inline-block;
  width:49%;
  margin:0;
  font-size:.82rem;
  color:#444;
}
.site-nav{background:var(--blue-main)}
.nav-menu{list-style:none;margin:0;padding:0}
.nav-menu li{display:inline-block}
.nav-menu a{
  display:block;
  padding:.9rem 1rem;
  color:var(--white);
  font-size:.86rem;
}
.page-main{padding:1.5rem 0 2rem 0}
.home-grid{
  display:grid;
  grid-template-columns:2.1fr 1fr 1.25fr;
  border:1px solid var(--line);
  background:var(--white);
}
.home-left,.home-middle,.home-right{border-right:1px solid var(--line)}
.home-right{border-right:0}
.block-title{
  margin:0;
  padding:.45rem .7rem;
  font-size:1.8rem;
  color:#777;
  font-weight:400;
  border-bottom:1px solid var(--line);
}
.lead-story,.mid-story,.opinion-card,.news-card,.editorial,.share-box section,.preview-article{
  background:var(--white);
}
.lead-story,.mid-story,.editorial,.share-box section,.preview-article{padding:.8rem}
.lead-story img{
  height:250px;
  object-fit:cover;
  margin-bottom:.7rem;
}
.mid-story img{
  height:175px;
  object-fit:cover;
  margin-bottom:.7rem;
}
.opinion-card{
  display:grid;
  grid-template-columns:78px 1fr;
  gap:.65rem;
  padding:.7rem;
  border-bottom:1px solid var(--line);
}
.opinion-card img{
  width:78px;
  height:78px;
  object-fit:cover;
}
.bottom-news{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  margin-top:1rem;
}
.news-card{
  border:1px solid var(--line);
  padding:.8rem;
}
.news-card img{
  height:140px;
  object-fit:cover;
  margin-bottom:.7rem;
}
.story-category,.article-category,.article-tags{
  margin:.2rem 0;
  color:var(--blue-main);
  font-size:.82rem;
}
.story-time,.article-meta{
  color:var(--muted);
  font-size:.9rem;
}
.lead-story h3,.mid-story h3,.opinion-card h3,.news-card h3,.editorial h2,.editorial h3,.preview-article h2,.preview-article h3{
  margin:.35rem 0 .5rem 0;
  color:var(--blue-dark);
}
.lead-story h3{font-size:1.45rem;line-height:1.2}
.mid-story h3{font-size:1.15rem;line-height:1.25}
.opinion-card h3{font-size:1rem;line-height:1.2}
.news-card h3{font-size:1.1rem;line-height:1.25}
.lead-story p,.mid-story p,.opinion-card p,.news-card p,.editorial p,.preview-article p{line-height:1.65}
.action-link,.site-footer button,.config-left button,.config-right button{
  display:inline-block;
  padding:.65rem .95rem;
  background:var(--blue-main);
  border:1px solid var(--blue-main);
  color:var(--white);
  font-weight:700;
}
.article-layout{
  display:grid;
  grid-template-columns:3fr 250px;
  gap:1rem;
}
.editorial{border:1px solid var(--line)}
.editorial h2{font-size:2rem;line-height:1.15}
.editorial img{
  max-width:760px;
  height:360px;
  object-fit:cover;
  margin:1rem 0;
}
.article-summary{
  padding:1rem;
  background:var(--blue-soft);
  border-left:5px solid var(--blue-main);
  font-size:1.04rem;
  font-weight:500;
}
.share-box section{border:1px solid var(--line)}
.share-box ul{list-style:none;padding:0;margin:0}
.share-box li{margin-bottom:.7rem}
.share-box a{
  display:block;
  padding:.7rem;
  background:var(--blue-soft);
  border:1px solid var(--line);
  font-family:"Montserrat",sans-serif;
}
.config-frame{
  border:1px solid var(--line);
  background:var(--white);
}
.config-head,.config-foot{
  background:var(--gray-soft);
  text-align:center;
  font-family:"Montserrat",sans-serif;
  font-size:1.1rem;
  padding:1rem 0;
}
.config-body{font-size:0}
.config-left,.config-center,.config-right{
  display:inline-block;
  vertical-align:top;
  min-height:520px;
  font-size:16px;
}
.config-left{
  width:20%;
  background:var(--green-soft);
  padding:.8rem;
}
.config-center{
  width:60%;
  background:var(--preview-soft);
  padding:.8rem;
}
.config-right{
  width:20%;
  background:var(--red-soft);
  padding:.8rem;
}
.config-left p,.config-right p{margin-bottom:1rem}
.config-left label,.config-right label{
  display:block;
  margin-bottom:.35rem;
  color:#222;
  font-size:.92rem;
  font-family:"Montserrat",sans-serif;
}
.config-left input,.config-left select,.config-right input,.config-right select{
  width:100%;
  padding:.5rem;
  border:1px solid var(--line);
  background:var(--white);
  font-family:"Playfair Display",serif;
}
.config-left input[type="color"]{height:42px;padding:.2rem}
.config-right input[type="range"]{padding:0}
.preview-article{
  max-height:500px;
  overflow-y:auto;
  border:1px solid var(--line);
}
.preview-article img{
  height:220px;
  object-fit:cover;
  margin:1rem 0;
}
.preview-article h2{font-size:1.55rem}
.preview-article h3{font-size:1.1rem}
.site-footer{
  margin-top:2rem;
  padding-top:2rem;
  background:var(--blue-main);
  color:var(--white);
}
.footer-columns{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:2rem;
  padding-bottom:1.2rem;
}
.footer-col h4{
  margin-top:0;
  margin-bottom:.9rem;
  color:var(--white);
}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin-bottom:.4rem}
.footer-col a,.footer-col p,.footer-bottom p{color:#f3f3f3}
.newsletter-box{margin-top:1.5rem;max-width:240px}
.site-footer input{
  width:100%;
  padding:.6rem;
  margin-bottom:.55rem;
  border:1px solid #a8c0eb;
  background:#fff;
}
.site-footer button{
  width:100%;
  background:#fff;
  border:1px solid #fff;
  color:var(--blue-dark);
}
.footer-bottom{
  padding:1rem 0 1.3rem 0;
  text-align:center;
  border-top:1px solid #8aa7db;
}
.footer-bottom p{margin:.3rem 0}