/* ─── THE CHRONICLE — Breaking News & World Reports ─── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,800;0,900;1,700;1,800&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400&family=DM+Sans:wght@300;400;500;600;700&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root {
  --primary: #c8102e;
  --white: #ffffff;
  --black: #111111;
  --accent: var(--primary);
  --accent-dark: var(--black);
  --red: var(--primary);
  --gold: var(--primary);
  --ink: var(--black);
  --muted: #666;
  --border: #f0f0f0;
  --bg: var(--white);
  --wrap: 1280px;
  --pad: 20px;
  --radius: 2px;
}

.img-ph { display: block; position: relative; overflow: hidden; background: #eee; }

footer { background: var(--black) !important; color: var(--white) !important; padding: 60px 0; }
header { background: var(--white) !important; border-bottom: 4px solid var(--primary) !important; }
.top-bar { background: var(--black) !important; color: var(--white) !important; }
.btn-subscribe { background: var(--primary) !important; color: var(--white) !important; }
.nav-bar { background: var(--primary) !important; color: var(--white) !important; }



html{font-size:21px;scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.7}
a{text-decoration:none;color:inherit;transition:all 0.2s ease}
img{display:block;width:100%;object-fit:cover}

/* =====================  UTILITY  ===================== */
.container{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.tag{display:inline-block;background:var(--accent);color:#fff;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:4px 10px;line-height:1.2}
.tag-red{background:var(--red)}
.tag-gold{background:var(--gold)}
.tag-dark{background:var(--ink)}

.kicker{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);margin-bottom:8px;display:block}
h1,h2,h3,h4,h5{font-family:'Playfair Display',serif;line-height:1.15;color:var(--ink)}
.byline{font-size:14px;color:var(--muted);font-weight:500}
.byline strong{color:var(--ink);font-weight:700}

.section-rule{display:flex;align-items:center;gap:15px;margin-bottom:25px;border-bottom: 3px solid var(--ink);padding-bottom:10px}
.section-rule h2{font-family:'DM Sans',sans-serif;font-size:14px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--ink);white-space:nowrap;margin:0}
.divider{height:1px;background:var(--border);margin:28px 0}

/* =====================  TOP BAR  ===================== */
.top-bar{background:var(--ink);color:#fff;padding:8px 0;font-size:13px}
.top-bar-inner{display:flex;align-items:center;justify-content:space-between;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.top-bar-date{color:rgba(255,255,255,.6);font-weight:400}
.top-bar-ticker{display:flex;align-items:center;gap:12px;flex:1;margin:0 24px;overflow:hidden}
.ticker-label{background:var(--accent);color:#fff;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:2px 8px;white-space:nowrap}
.ticker-text{color:rgba(255,255,255,.9);white-space:nowrap;animation:ticker 40s linear infinite}
@keyframes ticker{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}
.top-bar-links{display:flex;align-items:center;gap:18px}
.top-bar-links a{color:rgba(255,255,255,.7);font-size:14px}.top-bar-links a:hover{color:#fff}

/* =====================  HEADER  ===================== */
.header-v1{background:#fff;border-bottom:4px solid var(--ink);padding:25px 0}
.header-main{display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);max-width:var(--wrap);margin:0 auto;gap:30px}
.logo-v1{display:flex;flex-direction:column;align-items:center;text-align:center}
.logo-v1-name{font-family:'Playfair Display',serif;font-size:52px;font-weight:900;color:var(--ink);letter-spacing:-1.5px;line-height:0.9}
.logo-v1-tagline{font-family:'DM Sans',sans-serif;font-size:11px;font-weight:600;letter-spacing:5px;text-transform:uppercase;color:var(--muted);margin-top:8px}
.header-ad-banner{flex:1;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);height:90px;max-width:728px;background:#fafafa;color:var(--muted);font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase}
.btn-subscribe{background:var(--accent);color:#fff;font-size:14px;font-weight:700;padding:12px 24px;text-transform:uppercase;border-radius:2px}
.btn-subscribe:hover{background:var(--accent-dark)}
.btn-login{border:2px solid var(--ink);color:var(--ink);font-size:14px;font-weight:700;padding:10px 22px;text-transform:uppercase;margin-left:10px}

/* NAV */
.nav-bar{background:var(--ink);position:sticky;top:0;z-index:1000;box-shadow:0 4px 15px rgba(0,0,0,0.1)}
.nav-inner{display:flex;align-items:center;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.nav-link{display:inline-block;padding:16px 20px;font-size:14px;font-weight:700;color:rgba(255,255,255,.85);letter-spacing:.5px;text-transform:uppercase}
.nav-link:hover,.nav-link.active{color:#fff;background:rgba(255,255,255,.1)}
.nav-link.active{box-shadow:inset 0 -4px 0 var(--accent)}
.nav-search{margin-left:auto;padding:16px 20px;color:rgba(255,255,255,.7);cursor:pointer;font-size:18px}

/* =====================  HERO GRID  ===================== */
.hero-sec{padding:30px 0;background:var(--bg)}
.hero-container{display:grid;grid-template-columns:2fr 1fr 1fr;gap:4px;background:var(--border);border:1px solid var(--border)}
.hero-item{background:#fff;position:relative;overflow:hidden}
.hero-main{grid-row:span 2}
.hero-main-img{height:520px}
.hero-overlay{position:absolute;bottom:0;left:0;right:0;padding:35px;background:linear-gradient(transparent, rgba(0,0,0,0.95));color:#fff}
.hero-overlay h1{font-size:38px;color:#fff;margin:12px 0 15px;line-height:1.1}
.hero-overlay p{font-size:18px;color:rgba(255,255,255,0.85);margin-bottom:15px;line-height:1.6}
.hero-side-img{height:260px}
.hero-side-overlay{position:absolute;bottom:0;left:0;right:0;padding:20px;background:linear-gradient(transparent, rgba(0,0,0,0.9));color:#fff}
.hero-side-overlay h3{font-size:19px;color:#fff;line-height:1.2;margin:8px 0}

/* =====================  EDITOR'S PICKS  ===================== */
.picks-sec{padding:50px 0;background:#fff}
.picks-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.pick-card{display:flex;flex-direction:column}
.pick-img{aspect-ratio: 3/2; height: auto; margin-bottom: 20px; background: #eee; overflow: hidden;}
.pick-card h4{font-size:28px; margin:15px 0 10px; line-height: 1.15; font-weight: 900; letter-spacing: -0.5px;}
.pick-card p{font-size:18px; color:var(--muted); line-height: 1.7; margin-bottom: 20px;}

/* =====================  3-COL SECTIONS  ===================== */
.col-sec{padding:50px 0;background:var(--bg)}
.col-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px}
.col-header{display:flex;align-items:center;justify-content:space-between;border-bottom:3px solid var(--ink);padding-bottom:10px;margin-bottom:20px}
.col-header h3{font-family:'DM Sans',sans-serif;font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:1px;margin:0}
.col-header a{font-size:12px;font-weight:700;color:var(--accent)}

.art-big{margin-bottom:25px}
.art-big-img{height:180px;margin-bottom:15px}
.art-big h4{font-size:24px;margin-bottom:10px;line-height:1.2}

.art-small{display:flex;gap:15px;padding:15px 0;border-top:1px solid var(--border)}
.art-small-img{width:90px;height:70px;flex-shrink:0}
.art-small h5{font-size:17px;line-height:1.3;margin:0}

/* =====================  NEWSLETTER  ===================== */
.news-banner{background:var(--ink);padding:60px 0;color:#fff}
.news-inner{display:flex;align-items:center;justify-content:space-between;gap:40px}
.news-text h2{font-size:36px;color:#fff;margin-bottom:10px}
.news-text p{font-size:18px;color:rgba(255,255,255,0.7);max-width:550px}
.news-form{display:flex;width:450px}
.news-input{flex:1;padding:18px 25px;border:none;font-size:16px;outline:none;font-family: inherit}
.news-btn{background:var(--accent);color:#fff;padding:0 35px;font-weight:800;text-transform:uppercase;border:none;cursor:pointer}

/* =====================  POPULAR + CIRCLES  ===================== */
.pop-sec{padding:60px 0;background:#fff}
.pop-layout{display:grid;grid-template-columns:1fr 350px;gap:60px}
.pop-list{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.pop-item{display:flex;gap:20px;align-items:flex-start;padding:20px 0;border-bottom:1px solid var(--border)}
.pop-num{font-family:'Playfair Display',serif;font-size:45px;font-weight:900;color:var(--border);line-height:1}

.circles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.circle-item{text-align:center}
.circle-img-wrap{width:100px;height:100px;border-radius:50%;margin:0 auto 12px;overflow:hidden;border:3px solid #fff;box-shadow:0 10px 25px rgba(0,0,0,0.1)}
.circle-label{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:1px}

/* =====================  SIDEBAR LAYOUT  ===================== */
.main-layout{display:grid;grid-template-columns:1fr 320px;gap:40px;padding:50px 0}
.feat-block{margin-bottom:40px}
.feat-img-big{height:420px;margin-bottom:20px}
.feat-block h2{font-size:32px;margin:15px 0}
.feat-block p{font-size:18px;line-height:1.7;color:#444}

.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:30px}
.small-card-img{height:140px;margin-bottom:10px}
.small-card h5{font-size:16px;line-height:1.3}

.sw-item{display:flex;gap:15px;padding:15px 0;border-bottom:1px solid var(--border)}
.sw-img{width:80px;height:60px;flex-shrink:0}
.sw-title{font-size:15px;font-weight:800;margin:0;line-height:1.3}

/* =====================  POST DETAIL  ===================== */
.post-header{padding:80px 0 60px;text-align:center;border-bottom:1px solid var(--border);background:#fff}
.post-title{font-size:72px;font-weight:950;max-width:1150px;margin:0 auto 40px;line-height:1.0;letter-spacing:-3px}
.post-meta-strip{display:flex;justify-content:center;gap:40px;font-size:15px;text-transform:uppercase;font-weight:700;color:var(--muted)}
.post-meta-strip b{color:var(--ink)}

.post-hero-img{width:100%;height:600px;object-fit:cover;margin:60px 0}
.post-body-container{font-size:23px;line-height:1.75;font-weight:400;color:var(--ink);max-width:850px;margin:0 auto}
.post-body-container p{margin-bottom:35px}
.post-body-container h2{font-size:36px;margin:50px 0 25px}
.post-body-container blockquote{background:var(--bg);border-left:5px solid var(--accent);padding:20px 40px;margin:40px 0;font-style:italic;font-size:28px;line-height:1.4;color:var(--accent-dark)}

/* =====================  FOOTER  ===================== */
.footer-v1{background:var(--ink);color:#fff;padding:80px 0 40px}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:50px;margin-bottom:60px}
.f-info h2{font-size:32px;color:#fff;margin-bottom:20px}
.f-info p{font-size:15px;color:rgba(255,255,255,0.5);line-height:1.7;margin-bottom:25px}
.f-social{display:flex;gap:15px}
.f-soc-btn{width:40px;height:40px;background:rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;font-size:16px}

.f-col h4{font-family:'DM Sans',sans-serif;font-size:32px;font-weight:900;text-transform:uppercase;letter-spacing:1px;color:#fff;margin-bottom:30px;border-bottom:3px solid var(--accent);padding-bottom:15px}
.f-col ul{list-style:none;padding:0}
.f-col ul li{margin-bottom:15px}
.f-col ul li a{font-size:19px;color:rgba(255,255,255,0.8);font-weight:500}
.f-col ul li a:hover{color:var(--accent)}

.f-bottom{border-top:1px solid rgba(255,255,255,0.05);padding-top:30px;display:flex;justify-content:space-between;align-items:center;font-size:14px;color:rgba(255,255,255,0.3)}

/* PH */
.img-ph{background:#dcdcdc; position:relative; overflow:hidden;}
.img-ph img{width:100%; height:100%; object-fit:cover; display:block; position:relative; z-index: 2;}
.img-ph::after{content:'CHRONICLE'; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-family:'Playfair Display',serif; font-weight:900; font-size:24px; color:#fff; opacity:0.1; letter-spacing:4px; pointer-events:none; z-index: 1;}

@media(max-width:1100px){
  .hero-container{grid-template-columns:1fr 1fr}
  .picks-grid{grid-template-columns:repeat(2,1fr)}
  .col-grid{grid-template-columns:1fr 1fr}
  .pop-layout{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .header-main{flex-direction:column;text-align:center}
  .header-ad-banner{display:none}
  .hero-container{grid-template-columns:1fr}
  .col-grid{grid-template-columns:1fr}
  .news-inner{flex-direction:column;text-align:center}
  .news-form{width:100%}
  .main-layout{grid-template-columns:1fr}
  .post-title{font-size:38px}
  .post-hero-img{height:350px}
}