/* ═══════════════════════════════════════════════════════
   CricBun — News Homepage
   Extracted from html/cricbun-news-homepage.html
   Body-content styles only. Chrome owned by global-shell.css.
   ═══════════════════════════════════════════════════════ */

.nums{font-variant-numeric:tabular-nums}
.topicbar{background:var(--paper);border-bottom:1px solid var(--line)}
.topics{height:44px;display:flex;align-items:center;gap:7px;overflow:auto;scrollbar-width:none}
.topic{flex:none;border:1px solid var(--line);border-radius:999px;padding:6px 10px;font-size:.62rem;color:var(--muted);text-decoration:none}
.topic.active{background:var(--navy);border-color:var(--navy);color:var(--paper)}
.breaking{background:var(--red-p);border-bottom:1px solid oklch(88% .035 27)}
.breakingin{min-height:42px;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;font-size:.67rem}
.breaking b{color:var(--red);font-size:.57rem;letter-spacing:.1em}
.breaking a:last-child{color:var(--red);font-size:.6rem;font-weight:700}
main{padding:27px 0 76px}
.pagehead{display:flex;justify-content:space-between;align-items:end;gap:18px;margin-bottom:20px}
.eyebrow{font-size:.59rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-d);font-weight:800}
.pagehead h1{font-size:clamp(2.35rem,6vw,4.65rem);line-height:.97;letter-spacing:-.07em;margin-top:5px}
.pagehead p{font-size:.72rem;color:var(--muted);margin-top:9px}
.edition{font-size:.6rem;color:var(--muted);display:flex;gap:7px;align-items:center;white-space:nowrap}
.leadgrid{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(260px,.58fr);gap:17px}
.lead{background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm)}
.leadart{height:380px;background:var(--navy);position:relative;overflow:hidden;color:var(--paper);display:block;text-decoration:none}
.stadium{position:absolute;inset:0;width:100%;height:100%}
.leadshade{position:absolute;inset:0;background:linear-gradient(to top,oklch(18% .035 238/.88),transparent 66%)}
.leadcopy{position:absolute;left:0;right:0;bottom:0;padding:25px}
.badge{display:inline-flex;align-items:center;gap:6px;background:var(--red);color:var(--paper);border-radius:5px;padding:5px 8px;font-size:.56rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.lead h2{max-width:19ch;font-size:clamp(1.65rem,3.6vw,2.6rem);line-height:1.06;letter-spacing:-.05em;margin-top:10px}
.leadcopy p{max-width:62ch;color:oklch(86% .012 230);font-size:.76rem;margin-top:9px}
.byline{display:flex;gap:8px;align-items:center;margin-top:14px;font-size:.58rem;color:oklch(78% .014 230)}
.avatar{width:27px;height:27px;border-radius:50%;background:var(--cyan);color:var(--navy);display:grid;place-items:center;font-size:.5rem;font-weight:800}
.leadrail{background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm)}
.sectionhead{min-height:48px;padding:0 15px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.sectionhead h2{font-size:.82rem}
.sectionhead a,.sectionhead span{font-size:.57rem;color:var(--cyan-d);font-weight:700}
.railstory{display:grid;grid-template-columns:82px 1fr;gap:11px;padding:14px;border-bottom:1px solid var(--line);transition:background 140ms;text-decoration:none;color:inherit}
.railstory:last-child{border:0}
.railstory:hover{background:var(--paper-2)}
.thumb{height:68px;border-radius:8px;overflow:hidden;background:var(--cyan-p);display:grid;place-items:center;color:var(--cyan-d)}
.railstory h3{font-size:.7rem;line-height:1.35}
.meta{font-size:.54rem;color:var(--muted);margin-top:6px}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:17px;margin-top:17px}
.stack{display:grid;gap:17px}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:13px;overflow:hidden;box-shadow:var(--shadow-sm)}
.latest{padding:0 16px}
.storyrow{display:grid;grid-template-columns:186px 1fr auto;gap:16px;padding:17px 0;border-bottom:1px solid var(--line);align-items:center}
.storyrow:last-child{border:0}
.storyimg{height:112px;border-radius:9px;overflow:hidden;background:var(--cyan-p);display:block;text-decoration:none}
.category{font-size:.54rem;color:var(--cyan-d);text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.storyrow h3{font-size:1rem;line-height:1.26;margin-top:5px}
.storyrow p{font-size:.65rem;color:var(--muted);margin-top:7px;max-width:65ch}
.save{align-self:start;width:40px;height:40px;border:1px solid var(--line);border-radius:9px;background:var(--paper);color:var(--muted);display:grid;place-items:center}
.save.saved{background:var(--cyan-p);border-color:oklch(84% .06 221);color:var(--cyan-d)}
.loadmore{width:calc(100% - 32px);height:44px;margin:5px 16px 16px;border:1px solid var(--line);border-radius:9px;background:var(--paper);color:var(--cyan-d);font-size:.65rem;font-weight:700}
.mostread{counter-reset:read;padding:0 14px}
.mostread a{display:grid;grid-template-columns:32px 1fr;gap:8px;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.mostread a:last-child{border:0}
.mostread a:before{counter-increment:read;content:counter(read);font-size:1.15rem;font-weight:800;color:var(--cyan)}
.mostread h3{font-size:.66rem;line-height:1.35}
.editors{padding:14px}
.editorart{height:155px;border-radius:9px;overflow:hidden;background:var(--navy);position:relative}
.editors h3{font-size:.8rem;line-height:1.3;margin-top:11px}
.editors p{font-size:.58rem;color:var(--muted);margin-top:6px}
.newsletter{padding:17px;background:var(--cyan-p)}
.newsletter h2{font-size:.85rem}
.newsletter p{font-size:.61rem;color:var(--muted);margin-top:5px}
.signup{display:flex;margin-top:12px}
.signup input{min-width:0;flex:1;height:42px;border:1px solid var(--line);border-radius:8px 0 0 8px;background:var(--paper);padding:0 10px;font-size:.62rem}
.signup button{border:0;border-radius:0 8px 8px 0;background:var(--cyan-d);color:var(--paper);padding:0 12px;font-size:.61rem;font-weight:700}
.consent{font-size:.48rem;color:var(--muted);margin-top:7px}
.hubgrid{display:grid;grid-template-columns:1.15fr .85fr}
.hubfeature{min-height:285px;padding:23px;background:var(--navy);color:var(--paper);display:flex;flex-direction:column;justify-content:end;position:relative;overflow:hidden;text-decoration:none}
.hubfeature .category{color:var(--cyan)}
.hubfeature h3{font-size:1.55rem;line-height:1.08;margin-top:7px;max-width:15ch}
.hubfeature p{font-size:.65rem;color:oklch(76% .015 230);margin-top:8px;max-width:50ch}
.hubstories{padding:0 15px}
.hubstory{padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;display:block}
.hubstory:last-child{border:0}
.hubstory h3{font-size:.72rem}
.opiniongrid{display:grid;grid-template-columns:repeat(4,1fr)}
.opinion{padding:16px;border-right:1px solid var(--line);text-decoration:none;color:inherit}
.opinion:last-child{border:0}
.opinion .avatar{width:38px;height:38px}
.opinion h3{font-size:.7rem;line-height:1.4;margin-top:11px}
.opinion p{font-size:.55rem;color:var(--muted);margin-top:8px}
.state{display:none;padding:36px 18px;text-align:center}
.state h3{font-size:.86rem}
.state p{font-size:.62rem;color:var(--muted);margin-top:5px}
@media(min-width:1440px){:root{--wrap:min(1320px,calc(100% - 48px))}.layout{grid-template-columns:minmax(0,1fr) 330px}.leadart{height:430px}}
@media(max-width:960px){.leadgrid{grid-template-columns:1fr}.leadrail{display:grid;grid-template-columns:repeat(2,1fr)}.leadrail .sectionhead{grid-column:1/-1}.layout{grid-template-columns:1fr}.sidebar{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.pagehead{align-items:start}.edition{display:none}.pagehead h1{font-size:2.5rem}.leadart{height:420px}.leadcopy{padding:19px}.lead h2{font-size:1.65rem}.leadcopy p{font-size:.69rem}.leadrail{grid-template-columns:1fr}.storyrow{grid-template-columns:112px 1fr auto;gap:10px}.storyimg{height:88px}.storyrow h3{font-size:.79rem}.storyrow p{display:none}.sidebar{grid-template-columns:1fr}.hubgrid{grid-template-columns:1fr}.hubfeature{min-height:235px}.opiniongrid{display:flex;overflow:auto}.opinion{min-width:72vw}}