:root{--ink:#111418;--muted:#6b7280;--line:#e5e7eb;--blue:#0b2545;--blue2:#13315c;--red:#c8102e;--bg:#fff;--soft:#f5f6f8;--serif:"Playfair Display",Georgia,serif;--body:"Source Serif 4",Georgia,serif;--sans:Inter,Arial,Helvetica,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--body);color:var(--ink);background:var(--bg);line-height:1.55}
a{color:inherit;text-decoration:none}
a:hover{color:var(--red)}
a:focus-visible{outline:3px solid var(--red);outline-offset:2px}
img{display:block;max-width:100%}
.wrap{max-width:1240px;margin:0 auto;padding:0 18px}
.sans{font-family:var(--sans)}

/* Header */
.topbar{background:var(--blue);color:#cfd8e6;font:500 13px var(--sans);padding:7px 0}
.topbar .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.masthead{text-align:center;padding:22px 0 14px;background:linear-gradient(180deg,#fff,#f7f8fb)}
.logo{font:900 clamp(2.2rem,7vw,4rem)/1 var(--serif);letter-spacing:-1px;color:var(--blue)}
.logo:hover{color:var(--blue)}
.tag{font:500 12px var(--sans);color:var(--muted);text-transform:uppercase;letter-spacing:2px;margin-top:8px}
nav{border-top:1px solid var(--line);border-bottom:3px solid var(--red);background:rgba(255,255,255,.96);backdrop-filter:blur(6px);position:sticky;top:0;z-index:5;box-shadow:0 4px 14px rgba(0,0,0,.05)}
nav .wrap{display:flex;justify-content:safe center;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
nav a{font:700 13px var(--sans);text-transform:uppercase;letter-spacing:.6px;padding:14px 15px;position:relative}
nav a::after{content:"";position:absolute;left:15px;right:15px;bottom:0;height:3px;background:var(--red);transform:scaleX(0);transition:transform .25s}
nav a.on,nav a:hover{color:var(--red)}
nav a.on::after,nav a:hover::after{transform:scaleX(1)}

/* Trending ticker */
.ticker{background:var(--ink);color:#fff;font:500 14px var(--sans)}
.ticker .wrap{display:flex;align-items:center;gap:14px;overflow:hidden}
.ticker b{background:var(--red);padding:9px 14px;text-transform:uppercase;font-size:12px;letter-spacing:1px;flex:none}
.ticker-track{overflow:hidden;flex:1;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
#ticker{display:flex;width:max-content;animation:scroll 90s linear infinite}
#ticker:hover{animation-play-state:paused}
#ticker a{padding:9px 0;margin-right:42px;position:relative}
#ticker a::after{content:"";position:absolute;right:-24px;top:50%;width:6px;height:6px;border-radius:50%;background:var(--red)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* Images */
.thumb{display:block;overflow:hidden;border-radius:6px;background:linear-gradient(135deg,#c9d6e6,#8fa8c6)}
.thumb img,.hero img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
a:hover img,article:hover .thumb img{transform:scale(1.06)}

.tag-cat{display:inline-block;background:var(--c,var(--red));color:#fff;font:700 11px var(--sans);text-transform:uppercase;letter-spacing:1px;padding:4px 9px;border-radius:3px}
.time{display:block;font:500 12px var(--sans);color:var(--muted);margin-top:6px}

/* Hero */
.hero{display:grid;grid-template-columns:2fr 1fr;gap:16px;padding:26px 0 8px}
.hero-main,.hero-card{position:relative;overflow:hidden;border-radius:8px;color:#fff;background:#222;display:block}
.hero-main{min-height:520px}
.hero-main img,.hero-card img{position:absolute;inset:0}
.hero-main::after,.hero-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.88))}
.hero-text{position:absolute;left:0;right:0;bottom:0;padding:28px;z-index:1}
.hero-main h1{font:800 clamp(1.7rem,3.6vw,2.8rem)/1.12 var(--serif);margin:12px 0 10px;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.hero-main p{font-size:1.1rem;max-width:640px;color:#e9ecf1}
.hero-main .time{color:#c9d1dc}
.hero-side{display:grid;grid-template-rows:1fr 1fr;gap:16px}
.hero-card{min-height:250px}
.hero-card .hero-text{padding:20px}
.hero-card h2{font:700 1.25rem/1.25 var(--serif);margin-top:8px}
.hero-main:hover,.hero-card:hover{color:#fff}

/* Layout */
.layout{display:grid;grid-template-columns:2fr 1fr;gap:36px;padding:24px 0}
h2.sec{font:800 14px var(--sans);text-transform:uppercase;letter-spacing:1.5px;padding:10px 0 0;margin-bottom:16px;display:flex;align-items:center;gap:12px}
h2.sec::before{content:"";width:6px;height:20px;background:var(--c,var(--red));border-radius:2px}
h2.sec::after{content:"";flex:1;height:1px;background:var(--line)}
.block{margin-top:36px}

.list article{display:grid;grid-template-columns:230px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
.list .thumb{aspect-ratio:4/3}
.list h3{font:700 1.3rem/1.25 var(--serif);margin:8px 0 6px}
.list p{font-size:.98rem;color:#3f4651}

.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.layout .grid4{grid-template-columns:repeat(2,1fr)}
.card-img .thumb{aspect-ratio:3/2;margin-bottom:10px;box-shadow:0 6px 18px rgba(11,37,69,.12)}
.card-img h3{font:700 1.08rem/1.3 var(--serif);margin-top:8px}

/* Sidebar */
aside .box{background:var(--soft);padding:18px;margin-bottom:24px;border-radius:8px}
aside .box:first-child{position:sticky;top:64px}
.rank{list-style:none;counter-reset:n}
.rank li{counter-increment:n;padding:12px 0 12px 44px;border-bottom:1px solid var(--line);position:relative;font:600 1rem/1.35 var(--body)}
.rank li::before{content:counter(n);position:absolute;left:0;top:6px;font:900 2rem var(--serif);color:var(--red);opacity:.85}
.rank li:last-child{border:0}
.op{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.op:last-child{border:0}
.op b{display:block;font:italic 700 1rem/1.3 var(--serif)}
.avatar{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--red),#7a0a1c);color:#fff;font:800 14px var(--sans)}

/* Section columns */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px;padding:16px 0 40px;border-top:1px solid var(--line)}
.cols .thumb{aspect-ratio:16/10}
.cols h3{font:700 1.15rem/1.3 var(--serif);margin:12px 0 8px}
.cols li{list-style:none;padding:9px 0;border-bottom:1px solid var(--line);font-size:.97rem}

/* Article page */
.story-hero{position:relative;min-height:min(72vh,640px);display:flex;align-items:flex-end;color:#fff;background:#111;overflow:hidden}
.story-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:zoom 14s ease-out forwards}
.story-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.85))}
@keyframes zoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.story-head{position:relative;z-index:1;padding-top:40px;padding-bottom:44px;max-width:900px}
.story-head h1{font:900 clamp(2rem,5vw,3.4rem)/1.08 var(--serif);margin:14px 0 14px;text-shadow:0 2px 16px rgba(0,0,0,.4)}
.standfirst{font-size:1.25rem;color:#e6e9ee;max-width:720px}
.story-body{max-width:720px;margin:0 auto;padding:30px 18px 20px;font-size:1.18rem;line-height:1.75}
.story-body p{margin-bottom:1.2em}
.story-body > p:first-of-type::first-letter{float:left;font:900 4.2rem/.85 var(--serif);color:var(--red);padding:6px 10px 0 0}
.byline{display:flex;gap:12px;align-items:center;padding-bottom:18px;margin-bottom:24px;border-bottom:1px solid var(--line);font-family:var(--sans);font-size:.95rem}
blockquote{font:italic 700 1.5rem/1.4 var(--serif);color:var(--blue);border-left:5px solid var(--red);padding:6px 0 6px 22px;margin:28px 0}
.back{display:inline-block;margin-top:10px;font:700 14px var(--sans);color:var(--red)}
.more{padding-top:20px;padding-bottom:40px}

/* Contact */
.contact{max-width:680px;margin:40px auto 56px}
.contact h1{font:900 2.4rem var(--serif);margin-bottom:8px;color:var(--blue)}
.card{border:1px solid var(--line);border-left:5px solid var(--red);padding:18px 20px;margin:16px 0;background:var(--soft);border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.04)}
.card b{display:block;font:700 12px var(--sans);text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:4px}
.card a{font-size:1.15rem;color:var(--blue);font-weight:700}

footer{background:var(--blue);color:#cfd8e6;font:14px var(--sans);padding:32px 0;margin-top:20px;border-top:4px solid var(--red)}
footer .links a{margin-right:18px;display:inline-block;margin-bottom:8px}
footer .made{margin-top:12px;color:#fff;font-weight:700}

@media(max-width:900px){.hero,.layout{grid-template-columns:1fr}.grid4{grid-template-columns:repeat(2,1fr)}.hero-main{min-height:420px}aside .box:first-child{position:static}}
@media(max-width:560px){.list article{grid-template-columns:110px 1fr;gap:12px}.list p{display:none}.list h3{font-size:1.05rem}.hero-side{grid-template-rows:none}.hero-text{padding:18px}.story-body{font-size:1.08rem}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}