:root{
--black:#070707;
--ink:#0d0d0d;
--panel:#111;
--panel-2:#171717;
--white:#f7f5f0;
--muted:#99968f;
--soft:#d8d5ce;
--line:rgba(255,255,255,.12);
--line-soft:rgba(255,255,255,.06);
--red:#e51d2a;
--red-dark:#b5121d;
--gold:#c8a96b;
--max:1480px;
--ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--black)}
body{
background:var(--black);
color:var(--white);
font-family:Arial,Helvetica,sans-serif;
font-size:15px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow-x:hidden;
}
body.light-mode{
--black:#f4f2ed;
--ink:#fff;
--panel:#fff;
--panel-2:#eceae5;
--white:#111;
--muted:#696762;
--soft:#292929;
--line:rgba(0,0,0,.13);
--line-soft:rgba(0,0,0,.07);
--red:#c91624;
--red-dark:#a50f19;
}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{border:0;cursor:pointer}
img{max-width:100%;display:block}
::selection{background:var(--red);color:#fff}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--black)}
::-webkit-scrollbar-thumb{background:#333;border-radius:10px}
.container{width:min(100%,var(--max));margin:auto;padding-left:34px;padding-right:34px}
.site-header{
position:relative;
z-index:50;
background:rgba(7,7,7,.97);
border-bottom:1px solid var(--line);
}
.light-mode .site-header{background:rgba(244,242,237,.97)}
.header-top{
height:38px;
border-bottom:1px solid var(--line-soft);
display:flex;
align-items:center;
justify-content:center;
position:relative;
}
.header-top-inner{
height:100%;
display:flex;
align-items:center;
justify-content:space-between;
font-size:9px;
font-weight:800;
letter-spacing:.17em;
color:var(--muted);
text-transform:uppercase;
}
.brand{
font-family:Georgia,"Times New Roman",serif;
font-size:12px;
letter-spacing:.05em;
color:var(--white);
}
.header-date{
position:absolute;
left:50%;
transform:translateX(-50%);
white-space:nowrap;
}
.header-actions{display:flex;align-items:center;gap:4px}
.icon-button{
width:34px;
height:34px;
display:grid;
place-items:center;
background:transparent;
color:var(--white);
font-size:20px;
transition:.25s var(--ease);
}
.icon-button:hover{color:var(--red);transform:translateY(-1px)}
.main-nav{
height:58px;
display:flex;
align-items:center;
gap:0;
overflow-x:auto;
scrollbar-width:none;
}
.main-nav::-webkit-scrollbar{display:none}
.main-nav a{
height:58px;
display:flex;
align-items:center;
padding:0 18px;
position:relative;
font-size:10px;
font-weight:800;
letter-spacing:.13em;
text-transform:uppercase;
white-space:nowrap;
color:var(--muted);
transition:.25s var(--ease);
}
.main-nav a:first-child{padding-left:0}
.main-nav a:hover,.main-nav a.active{color:var(--white)}
.main-nav a.active:after{
content:"";
position:absolute;
left:18px;
right:18px;
bottom:0;
height:2px;
background:var(--red);
}
.main-nav a:first-child.active:after{left:0}
.search-panel{
display:none;
padding:16px 0;
background:var(--panel);
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
}
.search-panel.is-open{display:block}
.search-input{
width:100%;
height:46px;
padding:0 15px;
border:1px solid var(--line);
outline:none;
background:var(--ink);
color:var(--white);
}
.breaking-bar{
height:42px;
display:flex;
align-items:center;
background:var(--red);
color:#fff;
overflow:hidden;
}
.breaking-inner{
height:100%;
display:flex;
align-items:center;
padding:0;
}
.breaking-label{
height:100%;
display:flex;
align-items:center;
padding:0 25px 0 34px;
background:var(--red-dark);
font-size:9px;
font-weight:900;
letter-spacing:.18em;
white-space:nowrap;
position:relative;
z-index:2;
}
.breaking-content{
flex:1;
display:flex;
gap:35px;
padding-left:30px;
white-space:nowrap;
overflow:hidden;
font-size:9px;
font-weight:800;
letter-spacing:.1em;
text-transform:uppercase;
}
.breaking-content a{
display:inline-block;
margin-right:35px;
transition:.2s;
}
.breaking-content a:hover{text-decoration:underline}
main{max-width:var(--max);margin:auto;padding:0 34px}
.hero-section{padding:64px 0 78px}
.hero-grid{
display:grid;
grid-template-columns:minmax(0,1.7fr) minmax(330px,.72fr);
gap:32px;
}
.hero-story{min-width:0;cursor:pointer}
.hero-image{
height:550px;
position:relative;
overflow:hidden;
background:
radial-gradient(circle at 70% 25%,rgba(229,29,42,.4),transparent 22%),
linear-gradient(135deg,#292929,#111 48%,#050505);
}
.hero-image img,.hero-img{
width:100%!important;
height:100%!important;
object-fit:cover;
transition:transform .8s var(--ease);
}
.hero-story:hover .hero-image img{transform:scale(1.035)}
.hero-image:after{
content:"AI NEWS FACTORY";
position:absolute;
right:22px;
bottom:18px;
font-family:Georgia,"Times New Roman",serif;
font-size:9px;
letter-spacing:.24em;
color:rgba(255,255,255,.3);
pointer-events:none;
}
.image-placeholder:before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(135deg,transparent 0 42%,rgba(255,255,255,.035) 43% 44%,transparent 45%),
linear-gradient(45deg,transparent 0 58%,rgba(255,255,255,.025) 59% 60%,transparent 61%);
}
.image-placeholder:after{
content:"IMAGE";
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
font-size:9px;
font-weight:800;
letter-spacing:.3em;
color:rgba(255,255,255,.2);
}
.hero-overlay{
position:absolute;
inset:0;
z-index:1;
background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.8));
pointer-events:none;
}
.hero-content{
padding:25px 3px 0;
}
.hero-meta{
display:flex;
align-items:center;
gap:12px;
font-size:9px;
font-weight:800;
letter-spacing:.15em;
text-transform:uppercase;
color:var(--muted);
}
.category-badge{
display:inline-flex;
align-items:center;
font-size:8px;
font-weight:900;
letter-spacing:.16em;
color:var(--red);
text-transform:uppercase;
}
.hero-content h1{
margin:12px 0 17px;
max-width:1050px;
font-family:Georgia,"Times New Roman",serif;
font-size:clamp(40px,5vw,74px);
font-weight:400;
line-height:.98;
letter-spacing:-.055em;
}
.hero-content h1:after{
content:"";
display:block;
width:42px;
height:2px;
margin-top:20px;
background:var(--red);
}
.hero-content>p{
max-width:780px;
font-family:Georgia,"Times New Roman",serif;
font-size:17px;
line-height:1.55;
color:var(--soft);
}
.story-byline{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px;
margin-top:22px;
padding-top:15px;
border-top:1px solid var(--line);
font-size:8px;
font-weight:800;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--muted);
}
.side-stories{
border-top:1px solid var(--line);
}
.side-story{
display:grid;
grid-template-columns:135px minmax(0,1fr);
gap:17px;
padding:20px 0;
border-bottom:1px solid var(--line);
transition:.3s var(--ease);
}
.side-story:hover{transform:translateX(5px)}
.side-story>a{display:contents}
.side-image{
height:105px;
overflow:hidden;
position:relative;
background:linear-gradient(135deg,#292929,#0b0b0b);
}
.side-image img{
width:100%;
height:100%;
object-fit:cover;
transition:.5s var(--ease);
}
.side-story:hover .side-image img{transform:scale(1.06)}
.side-copy{min-width:0}
.side-copy h3{
margin:7px 0 8px;
font-family:Georgia,"Times New Roman",serif;
font-size:20px;
font-weight:400;
line-height:1.12;
letter-spacing:-.025em;
}
.side-copy p{
font-size:8px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--muted);
}
.content-section{
padding:75px 0;
border-top:1px solid var(--line);
}
.section-header{
display:flex;
align-items:end;
justify-content:space-between;
gap:25px;
margin-bottom:30px;
}
.section-header h2{
font-family:Georgia,"Times New Roman",serif;
font-size:42px;
font-weight:400;
line-height:1;
letter-spacing:-.045em;
}
.section-header h2:before{
content:"";
display:block;
width:34px;
height:2px;
margin-bottom:12px;
background:var(--red);
}
.section-link{
font-size:9px;
font-weight:900;
letter-spacing:.13em;
text-transform:uppercase;
color:var(--muted);
border-bottom:1px solid var(--line);
padding-bottom:5px;
transition:.25s;
}
.section-link:hover{color:var(--red);border-color:var(--red)}
.latest-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:35px 26px;
}
.story-card{
min-width:0;
transition:.3s var(--ease);
}
.story-card>a{display:block}
.story-image{
height:240px;
position:relative;
overflow:hidden;
background:linear-gradient(135deg,#292929,#0b0b0b);
}
.story-image img{
width:100%;
height:100%;
object-fit:cover;
transition:.6s var(--ease);
}
.story-card:hover .story-image img{transform:scale(1.045)}
.story-card-content{padding-top:16px}
.story-card-content h3{
margin:8px 0 8px;
font-family:Georgia,"Times New Roman",serif;
font-size:25px;
font-weight:400;
line-height:1.08;
letter-spacing:-.03em;
}
.story-card-content p{
font-family:Georgia,"Times New Roman",serif;
font-size:14px;
line-height:1.5;
color:var(--muted);
}
.story-meta{
display:flex;
gap:8px;
margin-top:13px;
font-size:8px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--muted);
}
.featured-card{
grid-column:span 2;
display:grid;
grid-template-columns:1.3fr 1fr;
gap:28px;
padding-bottom:35px;
border-bottom:1px solid var(--line);
}
.featured-card .story-image{height:330px}
.featured-card .story-card-content{padding-top:0}
.featured-card .story-card-content h3{
font-size:36px;
line-height:1.02;
}
.trending-section{
padding-top:70px;
}
.trend-list{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
border-top:1px solid var(--line);
}
.trend-item{
display:grid;
grid-template-columns:52px minmax(0,1fr);
gap:16px;
padding:21px 20px 21px 0;
border-bottom:1px solid var(--line);
transition:.25s var(--ease);
}
.trend-item:nth-child(even){
padding-left:20px;
border-left:1px solid var(--line);
}
.trend-item:hover{padding-left:6px}
.trend-number{
font-family:Georgia,"Times New Roman",serif;
font-size:27px;
line-height:1;
color:var(--red);
}
.trend-title{
font-family:Georgia,"Times New Roman",serif;
font-size:18px;
line-height:1.2;
}
.categories-section{
padding:78px 0;
}
.category-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
border-top:1px solid var(--line);
border-left:1px solid var(--line);
}
.category-card{
min-height:170px;
padding:24px;
display:flex;
align-items:flex-end;
position:relative;
overflow:hidden;
border-right:1px solid var(--line);
border-bottom:1px solid var(--line);
background:var(--ink);
transition:.35s var(--ease);
}
.category-card:before{
content:"";
position:absolute;
width:180px;
height:180px;
left:-70px;
bottom:-90px;
border-radius:50%;
background:rgba(229,29,42,.15);
transition:.4s var(--ease);
}
.category-card:hover{
background:var(--panel);
}
.category-card:hover:before{
transform:scale(1.5);
}
.category-card span{
position:relative;
z-index:1;
font-family:Georgia,"Times New Roman",serif;
font-size:30px;
font-weight:400;
letter-spacing:-.035em;
}
.category-card:after{
content:"→";
position:absolute;
right:22px;
bottom:20px;
font-size:20px;
color:var(--muted);
transition:.3s;
}
.category-card:hover:after{
color:var(--red);
transform:translate(3px,-3px);
}
.intelligence-section{
margin:0 calc(50% - 50vw);
padding:0 max(34px,calc((100vw - var(--max))/2 + 34px));
background:
radial-gradient(circle at 8% 50%,rgba(229,29,42,.2),transparent 25%),
linear-gradient(110deg,#151515,#080808);
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
}
.intelligence-content{
min-height:290px;
display:flex;
align-items:center;
}
.intelligence-content>div{
max-width:850px;
}
.intelligence-content .section-kicker{
color:var(--red);
font-size:9px;
font-weight:900;
letter-spacing:.2em;
margin-bottom:15px;
}
.intelligence-content h2{
font-family:Georgia,"Times New Roman",serif;
font-size:clamp(35px,4vw,58px);
font-weight:400;
line-height:1;
letter-spacing:-.045em;
}
.intelligence-content p{
max-width:680px;
margin-top:15px;
font-family:Georgia,"Times New Roman",serif;
font-size:15px;
color:var(--muted);
}
.newsletter-section{
margin:0 calc(50% - 50vw);
padding:70px max(34px,calc((100vw - var(--max))/2 + 34px));
background:var(--red);
color:#fff;
}
.newsletter-content{
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:end;
}
.newsletter-content h2{
font-family:Georgia,"Times New Roman",serif;
font-size:clamp(38px,4vw,60px);
font-weight:400;
line-height:.95;
letter-spacing:-.05em;
}
.newsletter-content p{
margin-top:12px;
font-family:Georgia,"Times New Roman",serif;
font-size:15px;
color:rgba(255,255,255,.82);
}
.newsletter-form{
display:flex;
align-items:center;
border-bottom:1px solid rgba(255,255,255,.6);
}
.newsletter-form input{
flex:1;
min-width:0;
height:50px;
border:0;
outline:0;
background:transparent;
color:#fff;
font-size:13px;
}
.newsletter-form input::placeholder{color:rgba(255,255,255,.65)}
.newsletter-form button{
height:50px;
padding:0 0 0 20px;
background:transparent;
color:#fff;
font-size:9px;
font-weight:900;
letter-spacing:.14em;
text-transform:uppercase;
}
.newsletter-form button:hover{opacity:.7}
.site-footer{
margin:0 calc(50% - 50vw);
padding:65px max(34px,calc((100vw - var(--max))/2 + 34px)) 25px;
background:#030303;
color:#fff;
}
.footer-main{
display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:50px;
padding-bottom:55px;
border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-brand h2{
font-family:Georgia,"Times New Roman",serif;
font-size:23px;
font-weight:400;
}
.footer-brand p{
max-width:350px;
margin-top:10px;
font-family:Georgia,"Times New Roman",serif;
font-size:13px;
color:#85827d;
}
.footer-column{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:9px;
}
.footer-column strong{
margin-bottom:8px;
font-size:8px;
font-weight:900;
letter-spacing:.17em;
color:var(--red);
text-transform:uppercase;
}
.footer-column a{
font-size:10px;
color:#88857f;
transition:.2s;
}
.footer-column a:hover{
color:#fff;
transform:translateX(2px);
}
.footer-bottom{
display:flex;
justify-content:space-between;
gap:20px;
padding-top:19px;
font-size:8px;
font-weight:800;
letter-spacing:.1em;
text-transform:uppercase;
color:#64615d;
}
.loading-state{
padding:45px 0;
font-family:Georgia,"Times New Roman",serif;
font-size:18px;
color:var(--muted);
}
@media(max-width:1100px){
.container{padding-left:25px;padding-right:25px}
main{padding:0 25px}
.hero-grid{grid-template-columns:1fr}
.side-stories{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
border-top:0;
}
.side-story{
display:block;
padding-top:20px;
}
.side-story>a{display:block}
.side-image{
height:155px;
margin-bottom:12px;
}
.featured-card{grid-template-columns:1fr}
.featured-card .story-image{height:330px}
.footer-main{grid-template-columns:1.5fr 1fr 1fr}
}
@media(max-width:760px){
.container{padding-left:18px;padding-right:18px}
.header-top-inner{padding:0 18px}
.header-date{display:none}
.brand{font-size:10px}
.main-nav{padding:0 18px;height:48px}
.main-nav a{
height:48px;
padding:0 14px;
font-size:8px;
}
.main-nav a:first-child{padding-left:0}
.main-nav a.active:after{left:14px;right:14px}
.main-nav a:first-child.active:after{left:0}
.breaking-label{padding:0 15px 0 18px;font-size:8px}
.breaking-content{padding-left:18px;font-size:8px}
main{padding:0 18px}
.hero-section{padding:40px 0 55px}
.hero-image{height:350px}
.hero-content h1{font-size:42px}
.hero-content>p{font-size:15px}
.side-stories{display:block}
.side-story{
display:grid;
grid-template-columns:115px minmax(0,1fr);
gap:13px;
padding:16px 0;
}
.side-story>a{display:contents}
.side-image{height:90px;margin:0}
.side-copy h3{font-size:17px}
.content-section{padding:55px 0}
.section-header{align-items:flex-end;margin-bottom:24px}
.section-header h2{font-size:34px}
.latest-grid{grid-template-columns:1fr}
.featured-card{
grid-column:auto;
display:block;
}
.featured-card .story-image{height:250px}
.featured-card .story-card-content{padding-top:16px}
.featured-card .story-card-content h3{font-size:29px}
.story-image{height:220px}
.story-card-content h3{font-size:23px}
.trend-list{grid-template-columns:1fr}
.trend-item:nth-child(even){padding-left:0;border-left:0}
.category-grid{grid-template-columns:repeat(2,1fr)}
.category-card{min-height:145px;padding:18px}
.category-card span{font-size:24px}
.intelligence-section{
padding-left:18px;
padding-right:18px;
}
.intelligence-content{min-height:300px}
.intelligence-content h2{font-size:37px}
.newsletter-section{
padding-left:18px;
padding-right:18px;
}
.newsletter-content{
grid-template-columns:1fr;
gap:32px;
}
.newsletter-content h2{font-size:42px}
.site-footer{
padding-left:18px;
padding-right:18px;
}
.footer-main{
grid-template-columns:1fr 1fr;
gap:40px 25px;
}
.footer-brand{grid-column:span 2}
.footer-bottom{flex-direction:column;gap:8px}
}
@media(max-width:430px){
.header-actions .icon-button{width:29px;font-size:18px}
.hero-image{height:300px}
.hero-content h1{font-size:36px}
.hero-content>p{font-size:14px}
.story-byline{font-size:7px}
.category-grid{grid-template-columns:1fr}
.category-card{min-height:130px}
.footer-main{grid-template-columns:1fr}
.footer-brand{grid-column:auto}
}
@media(prefers-reduced-motion:reduce){
*{scroll-behavior:auto!important;animation:none!important;transition:none!important}
  }