*{margin:0;padding:0;box-sizing:border-box}

body{
  font-family:"Libre Franklin",Arial,sans-serif;
  background:#fff;color:#111
}

/* GLOBAL */
.container{width:100%;max-width:100%;margin:0;padding:30px 40px}
.row{display:grid;grid-template-columns:3fr 1.2fr;gap:50px;width:100%}

/* HEADER */
.topbar{
  background:#74007c;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:12px 0;
  border-bottom:1px solid #e2e2e2;
  color:#fff
}
.logo{text-align:center}
.logo img{height:40px}
.top-left,.market{font-size:12px}
.top-right{text-align:right}
.subscribe{background:#567b95;color:#fff;border:none;padding:6px 10px}
.login{border:1px solid #000;background:#fff;padding:5px 8px;margin-left:6px}

/* NAV */
.nav,.livebar{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  background:#74007c;
  color:#fff;
  padding:10px 0;
  border-bottom:1px solid #e2e2e2
}
.nav a{color:#fff;text-decoration:none;font-size:14px}
.live{color:red;font-weight:700}

/* GRID */
.layout{
  display:grid;
  grid-template-columns:280px 1fr 320px;
  grid-template-areas:
    "left center right"
    "strip strip right"
    "bottom-left bottom-center right";
  gap:10px;margin-top:20px
}
.left{grid-area:left}
.center{grid-area:center}
.right{grid-area:right}
.strip{grid-area:strip}
.bottom-left{grid-area:bottom-left}
.bottom-center{grid-area:bottom-center}

/* LEFT */
.left .article{border-bottom:1px solid #e2e2e2;margin-bottom:16px;padding-bottom:16px}
.left h2{font:24px "Libre Baskerville"}
.left h3{font:18px "Libre Baskerville"}

/* CENTER */
.center{aspect-ratio:16/9;overflow:hidden}
.center img,.bottom-center img{width:100%;height:100%;object-fit:cover}
.caption{font-size:12px;color:#666;margin-top:6px}

/* RIGHT */
.right-main img{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:10px}
.right-main h3{font:22px "Libre Baskerville";margin-bottom:6px}
.right-main .desc{font-size:14px;color:#555}

/* SMALL GRID */
.side-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.small{height:120px;overflow:hidden}
.small img{width:100%;height:100%;object-fit:cover}
.small:hover{transform:scale(1.03);cursor:pointer}

/* STRIP */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:40px 0}
.strip span{font-size:11px;color:#777}

/* ARTICLE */
#articleContent{
  font-family:"Libre Baskerville",serif;
  line-height:1.75;
  max-width:850px
}
#articleContent h1{font-size:42px;margin-bottom:12px}
#articleContent h3{
  font-size:24px;margin:35px 0 10px;
  border-top:1px solid #ddd;padding-top:15px
}
#articleContent p{font-size:17px;margin-bottom:15px;color:#222}
#articleContent img{width:100%;border-radius:12px;margin:20px 0}
.lead{font-size:20px;margin-bottom:20px}
.text-muted{font-size:13px;color:#777;margin-bottom:20px}
.text-primary{color:#567b95;font-size:13px;font-weight:600;margin-bottom:10px}

/* TAGS + AUTHOR */
.badge{background:#eee;padding:6px 12px;border-radius:20px;font-size:12px}
.bg-light{background:#f5f5f5}
.rounded{border-radius:10px}

/* CALCULATOR */
.calculator{background:#111;color:#fff;border-radius:10px;padding:15px}
#calcDisplay{
  width:100%;padding:10px;border:none;
  text-align:right;font-size:18px;margin-bottom:10px
}
.calc-buttons{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px
}
.calc-buttons button{
  padding:12px;border:none;background:#333;color:#fff;
  border-radius:6px;cursor:pointer
}
.calc-buttons button:hover{background:#567b95}
.calc-buttons button:active{transform:scale(.95)}

/* FOOTER */
footer{background:#74007c;color:#eee;margin-top:60px}
footer .container{max-width:1200px;margin:auto;padding:40px 20px}
footer .row{grid-template-columns:repeat(3,1fr);gap:40px}
footer a{color:#ccc;font-size:14px;text-decoration:none}
footer a:hover{color:#fff}
footer ul{list-style:none}
footer input,footer button{
  width:100%;padding:10px;border:none;border-radius:4px
}
footer button{background:#000;color:#fff;cursor:pointer}
footer button:hover{background:#3d5f75}
footer hr{border:none;border-top:1px solid #333;margin:30px 0}
footer .text-center{text-align:center;font-size:13px;color:#aaa}

/* FOUR COLUMNS */
.four-columns{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:20px;margin:10px 0
}
.four-article img{width:100%;height:140px;object-fit:cover;margin-bottom:10px}
.four-article h4{font:16px "Libre Baskerville";margin-bottom:5px}
.four-article p{font-size:14px;color:#333}

/* CUSTOM PAGE */
.custom-page{padding:30px 40px}
.custom-page .row{grid-template-columns:280px 1fr}
.menu-left,.menu-bottom{
  background:#f5f5f5;padding:20px;border-radius:10px
}
.custom-page input,.custom-page select{
  width:100%;padding:8px;margin-bottom:12px;
  border:1px solid #ccc;border-radius:6px
}
.custom-page button{
  background:#567b95;color:#fff;border:none;
  padding:10px;border-radius:6px;cursor:pointer
}
.custom-page button:hover{background:#3d5f75}

/* RESPONSIVE */
@media(max-width:1024px){
  .layout{grid-template-columns:1fr;grid-template-areas:
    "left""center""right""strip""bottom-left""bottom-center"}
}
@media(max-width:900px){
  .row,footer .row,.custom-page .row{grid-template-columns:1fr}
  #articleContent h1{font-size:30px}
}
@media(max-width:600px){
  .nav{flex-wrap:wrap;gap:10px}
  .topbar{grid-template-columns:1fr;text-align:center}
}
@media(max-width:992px){.four-columns{grid-template-columns:repeat(2,1fr)}}
@media(max-width:576px){.four-columns{grid-template-columns:1fr}}