/* ===== BRAND FONT — Averta. Drop licensed woff2 files in /fonts/ and these win. ===== */
@font-face{font-family:'Averta';src:url('/fonts/Averta-Thin.woff2') format('woff2');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'Averta';src:url('/fonts/Averta-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Averta';src:url('/fonts/Averta-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Averta';src:url('/fonts/Averta-RegularItalic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Averta';src:url('/fonts/Averta-Semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Averta';src:url('/fonts/Averta-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Averta';src:url('/fonts/Averta-Extrabold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Averta';src:url('/fonts/Averta-Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
:root{
  --grey-a:#B8BEC6; --grey-soft:rgba(184,190,198,.12);
  --ink:#06070A; --ink-2:#0B0D12; --ink-3:#12151C;
  --paper:#F4F5F3; --dim:#98A0A6; --muted:#5C646D;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.17);
  --cyan:#7AFFFB; --cyan-soft:rgba(122,255,251,.13);
  --green:#6FE3A6; --green-soft:rgba(111,227,166,.13);
  --accent:var(--cyan); --accent-soft:var(--cyan-soft);
  --font:'Averta','Averta PE','Averta Std','Mulish',system-ui,-apple-system,sans-serif;
  --accent-ink:#04201F;
  --gut:clamp(20px,4vw,56px); --max:1280px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--paper);font-family:var(--font);font-weight:400;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
body::after{content:'';position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
/* ===== TYPE ===== */
.display{font-weight:200;letter-spacing:-.035em;line-height:.94}
.display b{font-weight:800;letter-spacing:-.045em}
.display i{font-style:italic;font-weight:300;color:var(--accent);letter-spacing:-.02em}
.h-xl{font-size:clamp(2.7rem,7vw,5.9rem)}
.h-lg{font-size:clamp(2.1rem,4.6vw,3.8rem)}
.h-md{font-size:clamp(1.4rem,2.3vw,2rem)}
.label{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);display:inline-flex;align-items:center;gap:10px}
.label .tick{width:18px;height:1px;background:var(--accent);display:inline-block;flex:none}
.lede{font-size:clamp(15px,1.1vw,16.5px);font-weight:300;color:var(--dim);max-width:46ch;line-height:1.68}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;padding:5px 11px;border-radius:100px;background:var(--accent-soft);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);white-space:nowrap}
.pill .dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.pill.is-live .dot{animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
/* ===== LETTERBOX ===== */
.letterbox{position:fixed;inset:0;z-index:9999;pointer-events:none}
.letterbox span{position:absolute;left:0;right:0;height:50%;background:var(--ink);transition:transform 1.1s var(--ease)}
.letterbox span:first-child{top:0}
.letterbox span:last-child{bottom:0}
.ready .letterbox span:first-child{transform:translateY(-101%)}
.ready .letterbox span:last-child{transform:translateY(101%)}
/* ===== HEADER ===== */
header{position:sticky;top:0;z-index:200;padding:18px 0;background:color-mix(in srgb,var(--ink) 74%,transparent);backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid transparent;transition:padding .4s var(--ease),border-color .4s}
header.stuck{padding:11px 0;border-bottom-color:var(--line)}
header::after{content:'';position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:linear-gradient(90deg,#FFFFFF,var(--cyan));transform:scaleX(var(--sp,0));transform-origin:0 50%}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:20px;position:relative}
.logo{font-weight:800;font-size:20px;letter-spacing:-.045em}
.logo em{font-style:normal;color:var(--cyan)}
nav{display:flex;gap:28px;align-items:center}
nav a{font-size:13.5px;font-weight:500;color:var(--dim);position:relative;padding:5px 0;transition:color .3s}
nav a::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--cyan);transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--ease)}
nav a:hover{color:var(--paper)}
nav a:hover::after,nav a.active::after{transform:scaleX(1);transform-origin:0 50%}
nav a.active{color:var(--paper)}
.header-actions{display:flex;align-items:center;gap:10px}
.icon-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:100px;border:1px solid var(--line);background:none;color:var(--paper);cursor:pointer;transition:border-color .35s,color .35s,background .35s}
.icon-btn:hover{border-color:var(--cyan);color:var(--cyan);background:var(--cyan-soft)}
.cta{position:relative;overflow:hidden;isolation:isolate;display:inline-block;border:1px solid var(--line-2);color:var(--paper);padding:10px 21px;border-radius:100px;font-size:12.5px;font-weight:600;letter-spacing:.02em;transition:color .4s var(--ease),border-color .4s;white-space:nowrap}
.cta::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--cyan);transform:translateY(101%);transition:transform .5s var(--ease)}
.cta:hover{color:var(--accent-ink);border-color:var(--cyan)}
.cta:hover::before{transform:translateY(0)}
.nav-toggle{display:none}
.lang-btn{width:auto;min-width:44px;padding:0 12px;font-family:var(--font);font-size:12px;font-weight:700;letter-spacing:.04em;text-decoration:none}
/* ===== SEARCH ===== */
.search-overlay{position:fixed;inset:0;z-index:500;display:none;background:rgba(4,5,8,.72);backdrop-filter:blur(14px);padding:clamp(60px,12vh,140px) var(--gut) 40px}
.search-overlay.open{display:block;animation:fadein .3s var(--ease)}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.search-panel{max-width:760px;margin:0 auto;background:var(--ink-3);border:1px solid var(--line-2);border-radius:16px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.7);animation:rise .45s var(--ease)}
@keyframes rise{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}
.search-bar{display:flex;align-items:center;gap:14px;padding:20px 22px;border-bottom:1px solid var(--line)}
.search-bar svg{flex:none;color:var(--cyan)}
.search-bar input{flex:1;background:none;border:none;color:var(--paper);font-family:var(--font);font-size:19px;font-weight:300;letter-spacing:-.01em}
.search-bar input:focus{outline:none}
.search-bar input::placeholder{color:var(--muted)}
.search-esc{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:5px 9px;border-radius:6px;background:none;cursor:pointer;font-family:var(--font)}
.search-panel .search-results{max-height:min(52vh,480px);overflow-y:auto}
.sr{display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:center;padding:14px 22px;border-bottom:1px solid var(--line);transition:background .25s}
.sr:last-child{border-bottom:none}
.sr:hover,.sr.sel{background:rgba(122,255,251,.07)}
.sr-thumb{width:64px;height:46px;border-radius:6px;overflow:hidden;background:#1a1f28}
.sr-thumb img{width:100%;height:100%;object-fit:cover}
.sr h5{font-size:14.5px;font-weight:600;line-height:1.3;letter-spacing:-.015em;margin-bottom:5px}
.sr-meta{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;gap:10px}
.sr-meta em{font-style:normal;color:var(--cyan)}
.sr mark{background:none;color:var(--cyan)}
.search-empty{padding:40px 22px;text-align:center;color:var(--dim);font-weight:300;font-size:15px}
.search-foot{padding:12px 22px;border-top:1px solid var(--line);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;gap:18px;flex-wrap:wrap}
/* ===== HERO ===== */
.hero{position:relative;min-height:min(92vh,880px);display:flex;align-items:flex-end;overflow:hidden}
.hero-media{position:absolute;inset:0;background:linear-gradient(140deg,#0f2b33,#0a0c14)}
.hero-media img{width:100%;height:100%;object-fit:cover;opacity:.5;transform:scale(1.08);animation:kenburns 24s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.06) translate3d(0,0,0)}to{transform:scale(1.16) translate3d(-1.5%,-2%,0)}}
.hero-media::after{content:'';position:absolute;inset:0;background:radial-gradient(120% 90% at 76% 16%,rgba(122,255,251,.14),transparent 55%),linear-gradient(180deg,rgba(6,7,10,.74) 0%,rgba(6,7,10,.18) 38%,rgba(6,7,10,.95) 92%)}
.hero-inner{position:relative;z-index:2;width:100%;padding-bottom:clamp(46px,7vw,92px);padding-top:120px}
.hero-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.hero h1{margin:0 0 26px;max-width:16ch}
.hero-foot{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--line)}
.byline{font-size:13px;font-weight:300;color:var(--dim)}
.byline strong{color:var(--paper);font-weight:600}
.hero-read{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.scroll-cue{margin-left:auto;display:inline-flex;align-items:center;gap:10px;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.scroll-cue span{width:1px;height:34px;background:linear-gradient(var(--cyan),transparent);display:block;animation:drop 2.4s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:0 0}45%{transform:scaleY(1);transform-origin:0 0}55%{transform:scaleY(1);transform-origin:0 100%}100%{transform:scaleY(0);transform-origin:0 100%}}
/* ===== ZONES ===== */
.zone{position:relative;overflow:hidden;padding:clamp(88px,11vw,164px) 0;isolation:isolate}
.zone::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;background:radial-gradient(500px circle at var(--mx,50%) var(--my,40%),var(--accent-soft),transparent 70%)}
.zone::after{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 60%,transparent),transparent)}
.zone-ent{--accent:var(--cyan);--accent-soft:var(--cyan-soft);
  background:radial-gradient(90% 62% at 14% 0%,rgba(24,74,96,.36),transparent 62%),radial-gradient(70% 60% at 92% 100%,rgba(122,255,251,.07),transparent 60%),linear-gradient(180deg,#070E14,#06080D)}
.zone-sport{--accent:var(--green);--accent-soft:var(--green-soft);
  background:radial-gradient(88% 60% at 86% 0%,rgba(24,84,58,.42),transparent 62%),radial-gradient(70% 60% at 6% 100%,rgba(111,227,166,.07),transparent 58%),linear-gradient(180deg,#061410,#08080A)}
.zone .wrap,.stories .wrap{position:relative;z-index:4}
.ghost{text-transform:uppercase;position:absolute;z-index:1;left:0;top:clamp(18px,5vw,56px);white-space:nowrap;pointer-events:none;font-weight:900;letter-spacing:-.05em;font-size:clamp(6rem,17vw,15rem);line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.055);transform:translateX(var(--gx,0))}
.zone-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:clamp(36px,5vw,60px)}
.zone-head h2{margin:18px 0 14px;max-width:15ch}
.zone-head .lede{max-width:40ch}
.head-side{text-align:right;min-width:190px}
.count{font-weight:200;font-size:clamp(2.8rem,5.6vw,4.6rem);line-height:1;color:var(--accent);letter-spacing:-.05em}
.count small{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:block;margin-top:8px}
/* ===== 3D OBJECTS (rendered assets) ===== */
.obj{position:absolute;z-index:1;pointer-events:none;will-change:transform}
.obj img{width:100%;height:auto}
.obj .bob{animation:bob 8s ease-in-out infinite;transform-origin:50% 50%}
.obj.b2 .bob{animation-duration:6.2s}
.obj.b3 .bob{animation-duration:10s}
@keyframes bob{0%,100%{transform:translateY(-14px) rotate(-3deg)}50%{transform:translateY(14px) rotate(3deg)}}
/* tinted into each section's palette */
.zone-ent .obj img{hue-rotate(142deg) }
.zone-sport .obj img{filter:hue-rotate(88deg)}
/* newsroom props are newsprint — kept neutral, no section tint */
.stories .obj img{opacity:.62;filter:saturate(.35) brightness(.9) contrast(.98)}
/* headings sit over the props, so give them a soft scrim */
/* no scrim: the props are positioned clear of the heading instead */
.zone-head h2,.zone-head .lede,.zone-head .count,.stories-head h2{text-shadow:0 1px 10px rgba(6,7,10,.5)}
/* positions sit below / beside the heading block, never behind it */
/* ENTERTAINMENT — reel + popcorn */
.o-cine{right:-1%;top:38%;width:clamp(104px,13vw,196px)}
.o-corn1{left:-1%;top:44%;width:clamp(104px,13vw,196px)}
.o-corn2{left:8%;bottom:5%;width:clamp(28px,3.6vw,54px)}
.o-corn3{right:31%;bottom:4%;width:clamp(26px,3.4vw,50px)}
.o-corn4{left:31%;bottom:2%;width:clamp(24px,3.2vw,46px)}
.o-corn5{right:13%;top:47%;width:clamp(22px,3vw,44px)}
/* SPORTS — whistle and cricket ball swapped; wicket + basketball removed */
.o-soccer{left:-2%;top:38%;width:clamp(88px,11.5vw,172px)}
.o-cricket{right:0%;top:41%;width:clamp(58px,7.6vw,118px)}
.o-whistle{right:27%;bottom:4%;width:clamp(62px,8.4vw,130px)}
.o-gridiron{left:11%;bottom:3%;width:clamp(58px,7.4vw,112px)}
/* NEWSROOM — newsprint props */
.o-news1{left:-2%;top:40%;width:clamp(78px,10vw,154px)}
.o-news2{right:-1%;bottom:10%;width:clamp(70px,9vw,138px)}
.stories{position:relative;overflow:hidden}
/* ===== RAIL + TILES ===== */
.rail{display:flex;gap:20px;overflow-x:auto;padding:10px 0 24px;scroll-snap-type:x proximity;scrollbar-width:none;margin:0 calc(var(--gut) * -1);padding-left:var(--gut);padding-right:var(--gut);cursor:grab;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.rail.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.rail.dragging .tile{transition:none}
.rail.dragging img{pointer-events:none}
.rail-nav{display:flex;gap:8px;align-items:center}
.rail-btn{width:42px;height:42px;border-radius:100px;border:1px solid var(--line-2);background:none;color:var(--paper);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.3s var(--ease)}
.rail-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.rail-btn:disabled{opacity:.3;cursor:default}
.rail-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:8px}
.rail-hint{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:9px}
.rail-hint svg{opacity:.7}
.tile{position:relative;flex:0 0 clamp(238px,25vw,296px);height:clamp(330px,38vw,410px);border-radius:12px;overflow:hidden;scroll-snap-align:start;border:1px solid var(--line);background:linear-gradient(155deg,#151A22,#0A0C11);transform-style:preserve-3d;transition:transform .6s var(--ease),border-color .5s,box-shadow .6s var(--ease);box-shadow:0 10px 30px rgba(0,0,0,.42)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72;transition:transform 1.1s var(--ease),opacity .6s}
.tile::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,6,9,.96) 8%,rgba(5,6,9,.3) 50%,transparent 80%)}
.tile-body{position:absolute;inset:auto 0 0 0;z-index:3;padding:20px;transform:translateZ(34px)}
.tile h3{font-weight:600;font-size:16.5px;line-height:1.26;letter-spacing:-.02em;margin:11px 0 0;transition:transform .55s var(--ease)}
.tile-date{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:9px;display:block}
.tile-more{display:flex;align-items:center;gap:8px;overflow:hidden;height:0;opacity:0;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);transition:height .5s var(--ease),opacity .45s,margin-top .5s var(--ease)}
.tile-glow{position:absolute;inset:0;z-index:2;opacity:0;transition:opacity .5s;background:radial-gradient(300px circle at var(--tx,50%) var(--ty,50%),color-mix(in srgb,var(--accent) 24%,transparent),transparent 68%)}
.tile:hover{border-color:color-mix(in srgb,var(--accent) 48%,transparent);box-shadow:0 30px 64px rgba(0,0,0,.62)}
.tile:hover img{transform:scale(1.09);opacity:.9}
.tile:hover .tile-glow{opacity:1}
.tile:hover h3{transform:translateY(-2px)}
.tile:hover .tile-more{height:17px;opacity:1;margin-top:13px}
.ph{position:absolute;top:14px;left:14px;z-index:4;font-size:8.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#0B0D12;background:rgba(255,255,255,.72);padding:4px 8px;border-radius:100px}
/* ===== LATEST ===== */
.stories{padding:clamp(78px,10vw,136px) 0}
.stories-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:44px}
.stories-head h2{margin-top:16px}
.grid{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(24px,3vw,44px);align-items:start}
.feature{position:relative;border-radius:14px;overflow:hidden;display:block;background:linear-gradient(155deg,#101820,#0A0B10);border:1px solid var(--line);transition:border-color .5s}
.feature:hover{border-color:color-mix(in srgb,var(--cyan) 40%,transparent)}
.feature-img{position:relative;aspect-ratio:16/10;overflow:hidden}
.feature-img img{width:100%;height:100%;object-fit:cover;opacity:.8;transition:transform 1.2s var(--ease),opacity .6s}
.feature:hover .feature-img img{transform:scale(1.06);opacity:1}
.feature-body{padding:26px 26px 30px}
.feature h3{font-weight:300;font-size:clamp(1.45rem,2.5vw,2.05rem);line-height:1.1;letter-spacing:-.035em;margin:14px 0 12px}
.feature h3 b{font-weight:800}
.arrow{display:inline-flex;align-items:center;gap:10px;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);margin-top:14px}
.arrow svg{transition:transform .5s var(--ease)}
.feature:hover .arrow svg,.post-list .post:hover .arrow svg{transform:translateX(6px)}
.post-list{display:flex;flex-direction:column}
.post-list .post{display:grid;grid-template-columns:92px 1fr;gap:18px;align-items:center;padding:19px 16px;border-top:1px solid var(--line);position:relative;overflow:hidden;transition:padding-left .5s var(--ease)}
.post-list .post:last-of-type{border-bottom:1px solid var(--line)}
.post-list .post::before{content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(122,255,251,.09),transparent 66%);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease)}
.post-list .post>*{position:relative;z-index:1}
.post-list .post:hover{padding-left:26px}
.post-list .post:hover::before{transform:scaleX(1)}
.post-thumb{width:92px;height:66px;border-radius:7px;overflow:hidden;background:linear-gradient(150deg,#18202a,#0d1014);flex:none}
.post-thumb img{width:100%;height:100%;object-fit:cover;opacity:.74;transition:transform .9s var(--ease),opacity .5s}
.post-list .post:hover .post-thumb img{transform:scale(1.12);opacity:1}
.post-list .post h4{font-weight:600;font-size:15.5px;line-height:1.3;letter-spacing:-.015em;margin-bottom:7px}
.post-meta{font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap}
.post-meta em{font-style:normal;color:var(--cyan)}
.post-meta em.sport{color:var(--green)}
.list-more{margin-top:22px;display:flex;justify-content:flex-start}
/* ===== NEWSLETTER / FOOTER ===== */
.subscribe{position:relative;overflow:hidden;border-radius:16px;padding:clamp(32px,5vw,58px);border:1px solid var(--line);background:radial-gradient(120% 130% at 86% 6%,rgba(122,255,251,.15),transparent 58%),linear-gradient(160deg,#101720,#08090E);display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap}
.subscribe h2{margin:14px 0 10px}
.subscribe p{color:var(--dim);font-size:14.5px;font-weight:300;max-width:40ch}
.sub-form{display:flex;gap:10px;flex-wrap:wrap}
.sub-form input{background:rgba(0,0,0,.42);border:1px solid var(--line-2);color:var(--paper);padding:14px 18px;border-radius:100px;font-size:13.5px;font-family:var(--font);width:252px;transition:border-color .4s,background .4s}
.sub-form input::placeholder{color:var(--muted)}
.sub-form input:focus{outline:none;border-color:var(--cyan);background:rgba(0,0,0,.62)}
.sub-form button{position:relative;overflow:hidden;isolation:isolate;cursor:pointer;background:var(--cyan);color:var(--accent-ink);border:none;padding:14px 30px;border-radius:100px;font-family:var(--font);font-size:13.5px;font-weight:700;transition:color .4s var(--ease)}
.sub-form button::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--paper);transform:translateY(101%);transition:transform .5s var(--ease)}
.sub-form button:hover::before{transform:translateY(0)}
footer{margin-top:clamp(66px,9vw,116px);border-top:1px solid var(--line);padding:42px 0 54px}
.foot-row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot-social{display:flex;gap:22px;flex-wrap:wrap}
.foot-social a{font-size:12.5px;font-weight:500;color:var(--dim);position:relative;transition:color .35s}
.foot-social a::after{content:'';position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:var(--cyan);transform:scaleX(0);transform-origin:100% 50%;transition:transform .4s var(--ease)}
.foot-social a:hover{color:var(--paper)}
.foot-social a:hover::after{transform:scaleX(1);transform-origin:0 50%}
.foot-copy{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
/* ===== REVEALS ===== */
/* Reveal-on-scroll is a progressive enhancement: without JS, or if the
   observer never fires, content must still be visible. */
html.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.js .rv.in{opacity:1;transform:none}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.08s}
.rv[data-d="2"]{transition-delay:.16s}
.rv[data-d="3"]{transition-delay:.24s}
.rv[data-d="4"]{transition-delay:.32s}
.word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.16em;margin-bottom:-.16em}
.word>span{display:inline-block;transform:translateY(105%);transition:transform 1s var(--ease)}
.ready .hero .word>span{transform:none}
.hero .word:nth-child(1)>span{transition-delay:.34s}
.hero .word:nth-child(2)>span{transition-delay:.40s}
.hero .word:nth-child(3)>span{transition-delay:.46s}
.hero .word:nth-child(4)>span{transition-delay:.52s}
.hero .word:nth-child(5)>span{transition-delay:.58s}
.hero .word:nth-child(6)>span{transition-delay:.64s}
.hero .word:nth-child(7)>span{transition-delay:.70s}
.hero .word:nth-child(8)>span{transition-delay:.76s}
.hero .word:nth-child(9)>span{transition-delay:.82s}
/* ===== RESPONSIVE ===== */
@media (max-width:900px){
  .nav-toggle{display:flex}
  nav{display:none;position:absolute;top:calc(100% + 18px);left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;background:var(--ink-3);border:1px solid var(--line);border-radius:12px;padding:8px;z-index:220;box-shadow:0 24px 60px rgba(0,0,0,.6)}
  nav.open{display:flex}
  nav a{padding:13px 14px;border-radius:8px}
  nav a::after{display:none}
  nav a:hover,nav a.active{background:rgba(255,255,255,.05);color:var(--paper)}
  .grid{grid-template-columns:1fr}
  .head-side{text-align:left;min-width:0}
  .zone-head{align-items:flex-start}
  .hero-inner{padding-top:88px}
  .scroll-cue,.hdr-cta{display:none}
  .obj{opacity:.5}
  .o-corn2,.o-corn3,.o-corn4,.o-corn5,.o-cricket,.o-gridiron,.o-news2{display:none}
}
@media (max-width:560px){
  .post-list .post{grid-template-columns:70px 1fr;gap:14px}
  .post-thumb{width:70px;height:56px}
  .sub-form,.sub-form input,.sub-form button{width:100%}
  .search-overlay{padding-top:70px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .word>span{transform:none!important}
  .letterbox{display:none}
}
/* ---- section tag strip (replaces the global marquee) ---- */
.tagrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 clamp(26px,3vw,40px)}
.tagrow .lbl{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-inline-end:4px}
.tagrow a{font-size:12.5px;font-weight:600;padding:8px 15px;border-radius:100px;border:1px solid var(--line);
  color:var(--dim);white-space:nowrap;transition:.32s var(--ease)}
.tagrow a:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);transform:translateY(-2px)}
[dir="rtl"] .tagrow .lbl{letter-spacing:normal;text-transform:none;font-size:1.06em}
/* ===================== TOP 10 — reddish world ===================== */
.theme-top10,.zone-top10{--accent:var(--grey-a);--accent-soft:var(--grey-soft)}
.zone-top10{
  background:
    radial-gradient(88% 60% at 84% 0%,rgba(64,70,79,.46),transparent 62%),
    radial-gradient(70% 55% at 6% 100%,rgba(184,190,198,.08),transparent 58%),
    linear-gradient(180deg,#101317,#0A0B0D);
}
/* the numeral wrapper — used on both the home rail and the archive grid */
.t10{position:relative;display:block;padding-inline-start:clamp(30px,3.6vw,58px)}
.t10-num{
  position:absolute;inset-inline-start:0;bottom:-.10em;z-index:0;pointer-events:none;
  font-weight:800;line-height:.72;letter-spacing:-.06em;color:#2B2E34;
  font-size:clamp(5.4rem,8.4vw,9rem);
  transition:color .45s var(--ease),transform .55s var(--ease);
}
.t10:hover .t10-num{color:#7AFFFB;transform:translateY(-6px)}
.t10-10 .t10-num{font-size:clamp(4.4rem,6.8vw,7.4rem);letter-spacing:-.085em}
.t10 > .tile,.t10 > .card{position:relative;z-index:1}
/* home rail: the numeral must not be clipped by the scroller */
.chart{padding-top:14px}
.chart .t10{flex:0 0 auto;scroll-snap-align:start}
/* the tile's image and body are absolutely positioned, so it has no intrinsic
   width once it is no longer a direct flex child — set it explicitly */
.chart .t10 > .tile{display:block;width:clamp(238px,25vw,296px);height:clamp(330px,38vw,410px)}
/* archive grid */
.chart-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:clamp(20px,2.4vw,34px);row-gap:clamp(26px,3vw,44px)}
.chart-grid .card{height:100%}
@media (max-width:600px){
  .t10{padding-inline-start:clamp(26px,9vw,44px)}
  .t10-num{font-size:clamp(4.6rem,17vw,6.4rem)}
}
:root{
  --ink:#06070A; --ink-2:#0B0D12; --ink-3:#12151C;
  --paper:#F4F5F3; --dim:#98A0A6; --muted:#5C646D;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.17);
  --cyan:#7AFFFB; --cyan-soft:rgba(122,255,251,.13);
  --green:#6FE3A6; --green-soft:rgba(111,227,166,.13);
  --accent:var(--cyan); --accent-soft:var(--cyan-soft);
  --font:'Averta','Averta PE','Averta Std','Mulish',system-ui,-apple-system,sans-serif;
  --accent-ink:#04201F;
  --gut:clamp(20px,4vw,56px); --max:1320px;
  --ease:cubic-bezier(.22,1,.36,1);
}
/* section theming — the article inherits the world it came from */
body.theme-sport{--accent:var(--green);--accent-soft:var(--green-soft);
  --wash:radial-gradient(80% 50% at 82% 0%,rgba(24,84,58,.44),transparent 60%),radial-gradient(60% 40% at 4% 22%,rgba(111,227,166,.07),transparent 60%)}
body.theme-ent{--accent:var(--cyan);--accent-soft:var(--cyan-soft);
  --wash:radial-gradient(80% 50% at 18% 0%,rgba(24,74,96,.44),transparent 60%),radial-gradient(60% 40% at 96% 22%,rgba(122,255,251,.07),transparent 60%)}
body{background:var(--ink);color:var(--paper);font-family:var(--font);line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
.display{font-weight:200;letter-spacing:-.035em;line-height:.98}
.display i{font-style:italic;font-weight:300;color:var(--accent)}
.cta{position:relative;overflow:hidden;isolation:isolate;display:inline-block;border:1px solid var(--line-2);color:var(--paper);padding:10px 21px;border-radius:100px;font-size:12.5px;font-weight:600;transition:color .4s var(--ease),border-color .4s;white-space:nowrap;cursor:pointer;font-family:var(--font)}
.cta::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--accent);transform:translateY(101%);transition:transform .5s var(--ease)}
.cta:hover{color:var(--accent-ink);border-color:var(--accent)}
.cta.copied{color:var(--accent-ink);border-color:var(--accent)}
.cta.copied::before{transform:translateY(0)}
.cta.done{color:var(--muted);border-color:var(--line);cursor:default}
.cta.done::before{transform:translateY(101%)}
header{position:sticky;top:0;z-index:200;padding:16px 0;background:color-mix(in srgb,var(--ink) 76%,transparent);backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid var(--line)}
header::after{content:'';position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:linear-gradient(90deg,#FFFFFF,var(--cyan));transform:scaleX(var(--sp,0));transform-origin:0 50%}
.logo{display:inline-flex;align-items:center;line-height:0}
.logo img{width:132px;height:auto}
.foot-row .logo img{width:100px}
nav{display:flex;gap:26px;align-items:center}
nav a::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--ease)}
nav a:hover::after{transform:scaleX(1);transform-origin:0 50%}
.icon-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
/* preview-only theme switch */
.theme-switch{display:flex;gap:2px;border:1px solid var(--line);border-radius:100px;padding:3px}
.theme-switch button{background:none;border:none;color:var(--muted);font-family:var(--font);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:6px 11px;border-radius:100px;cursor:pointer;transition:.3s}
.theme-switch button.on{background:var(--accent-soft);color:var(--accent)}
/* ===== ARTICLE HEAD ===== */
.art-head{position:relative;overflow:hidden;padding:clamp(38px,6vw,72px) 0 clamp(26px,3vw,40px);background:var(--wash)}
.art-head::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 55%,transparent),transparent)}
.crumb{display:flex;gap:9px;align-items:center;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:26px;flex-wrap:wrap}
.crumb a:hover{color:var(--accent)}
.crumb span{opacity:.5}
.art-head h1{margin:18px 0 20px;max-width:19ch;font-size:clamp(2.1rem,5vw,4.1rem)}
.standfirst{font-size:clamp(15px,1.5vw,19px);font-weight:300;color:var(--dim);max-width:56ch;line-height:1.6}
.art-meta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.avatar{width:40px;height:40px;border-radius:100px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;letter-spacing:-.02em;background:var(--accent-soft);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);flex:none}
.art-meta .who{font-size:13.5px;font-weight:600}
.art-meta .when{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.meta-sep{width:1px;height:30px;background:var(--line)}
.art-stat{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.art-stat b{color:var(--paper);font-weight:700}
/* 3D props */
.obj{position:absolute;z-index:0;pointer-events:none;will-change:transform}
.obj img{opacity:1;filter:none}
/* no scrim — props sit to the right of the headline instead */
.art-head h1,.standfirst{text-shadow:0 1px 10px rgba(6,7,10,.5)}
.p1{right:1%;top:8%;width:clamp(92px,11.5vw,178px)}
.p2{right:23%;bottom:6%;width:clamp(40px,5vw,80px)}
.p3{right:11%;top:54%;width:clamp(44px,5.4vw,86px)}
.p4{right:34%;top:12%;width:clamp(30px,3.8vw,58px)}
.p5{right:5%;bottom:32%;width:clamp(28px,3.4vw,52px)}
.p6{right:43%;bottom:10%;width:clamp(26px,3.2vw,48px)}
.wrap{position:relative;z-index:2}
/* ===== FEATURE IMAGE ===== */
.art-figure{margin:0 0 clamp(30px,4vw,52px)}
.art-figure .shot{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/8;background:linear-gradient(150deg,#141922,#0a0c11)}
.art-figure img{width:100%;height:100%;object-fit:cover}
.art-figure figcaption{margin-top:12px;font-size:12px;font-weight:300;color:var(--muted);display:flex;gap:10px;align-items:baseline}
.art-figure figcaption b{font-weight:600;color:var(--dim);letter-spacing:.1em;text-transform:uppercase;font-size:9.5px}
/* ===== LAYOUT ===== */
.art-grid{display:grid;grid-template-columns:58px minmax(0,1fr) 340px;gap:clamp(24px,3vw,48px);align-items:start;padding-bottom:clamp(50px,7vw,90px)}
/* share rail */
.share-rail{position:sticky;top:104px;display:flex;flex-direction:column;gap:10px;align-items:center}
.share-rail .cap{font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);writing-mode:vertical-rl;margin-bottom:6px}
.sbtn{width:42px;height:42px;border-radius:100px;border:1px solid var(--line);background:none;color:var(--dim);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.35s var(--ease)}
.sbtn:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft);transform:translateY(-3px)}
.sbtn.copied{color:var(--accent);border-color:var(--accent)}
/* ===== BODY COPY ===== */
.prose{max-width:68ch;font-size:clamp(15.5px,1.15vw,17.5px);font-weight:300;line-height:1.78;color:#D7DBDD}
.prose p{margin-bottom:1.35em}
.prose p.lead{font-size:1.12em;color:var(--paper);font-weight:400}
.prose p.lead::first-letter{float:left;font-size:3.6em;line-height:.82;font-weight:800;margin:.06em .12em 0 0;color:var(--accent)}
.prose h2{font-size:clamp(1.35rem,2.3vw,1.9rem);font-weight:200;letter-spacing:-.035em;line-height:1.15;color:var(--paper);margin:2em 0 .7em}
.prose h2 b{font-weight:800}
.prose h3{font-size:clamp(1.05rem,1.5vw,1.25rem);font-weight:700;letter-spacing:-.02em;color:var(--paper);margin:1.7em 0 .5em}
.prose ul{margin:0 0 1.35em 0;padding-left:0;list-style:none}
.prose ul li{position:relative;padding-left:26px;margin-bottom:.6em}
.prose ul li::before{content:'';position:absolute;left:4px;top:.7em;width:7px;height:1px;background:var(--accent)}
.prose a.inline{color:var(--accent);border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent);transition:border-color .3s}
.prose a.inline:hover{border-color:var(--accent)}
.pullquote{margin:2.2em 0;padding:26px 0 26px 30px;border-left:2px solid var(--accent);font-size:clamp(1.15rem,2vw,1.6rem);font-weight:200;letter-spacing:-.03em;line-height:1.28;color:var(--paper)}
.pullquote cite{display:block;margin-top:16px;font-size:11px;font-weight:600;font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.inline-fig{margin:2.2em 0}
.inline-fig .shot{border-radius:12px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/9}
.inline-fig img{width:100%;height:100%;object-fit:cover}
.inline-fig figcaption{margin-top:10px;font-size:12px;color:var(--muted);font-weight:300}
.sample-note{display:inline-flex;align-items:center;gap:8px;font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#0B0D12;background:rgba(255,255,255,.7);padding:5px 10px;border-radius:100px;margin-bottom:22px}
.tags{display:flex;gap:9px;flex-wrap:wrap;margin:36px 0 0;padding-top:26px;border-top:1px solid var(--line)}
.tags .tag{font-size:11px;font-weight:600;letter-spacing:.06em;padding:7px 13px;border-radius:100px;border:1px solid var(--line);color:var(--dim);transition:.3s}
.tags .tag:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.share-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:28px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.share-row .lbl{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.author-box{display:flex;gap:20px;align-items:flex-start;margin-top:34px;padding:26px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(150deg,#101520,#0A0B10)}
.author-box .avatar{width:56px;height:56px;font-size:18px}
.author-box h4{font-size:16px;font-weight:700;margin-bottom:6px}
.author-box p{font-size:13.5px;font-weight:300;color:var(--dim);line-height:1.6}
/* ===== COMMENTS ===== */
.comments{margin-top:clamp(46px,6vw,76px)}
.comments-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.comments-head h2{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:200;letter-spacing:-.04em}
.comments-head h2 b{font-weight:800}
.sortby{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;gap:14px}
.sortby button{background:none;border:none;color:inherit;font:inherit;cursor:pointer;padding:0}
.sortby button.on{color:var(--accent)}
.cform{padding:22px;border-radius:14px;border:1px solid var(--line);background:var(--ink-2);margin-bottom:30px}
.cform textarea{width:100%;background:rgba(0,0,0,.4);border:1px solid var(--line-2);border-radius:10px;color:var(--paper);font-family:var(--font);font-size:14.5px;font-weight:300;padding:14px 16px;resize:vertical;min-height:96px;line-height:1.6}
.cform textarea:focus{outline:none;border-color:var(--accent)}
.cform textarea::placeholder{color:var(--muted)}
.cform-row{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.cform-row input{flex:1 1 180px;background:rgba(0,0,0,.4);border:1px solid var(--line-2);border-radius:100px;color:var(--paper);font-family:var(--font);font-size:13px;padding:12px 16px}
.cform-row input:focus{outline:none;border-color:var(--accent)}
.cform-row input::placeholder{color:var(--muted)}
.cform-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap}
.cform-foot small{font-size:11px;color:var(--muted);font-weight:300}
.cform button[type=submit]{background:var(--accent);color:var(--accent-ink);border:none;padding:12px 26px;border-radius:100px;font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;transition:filter .3s}
.cform button[type=submit]:hover{filter:brightness(1.12)}
.cmt{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:20px 0;border-top:1px solid var(--line)}
.cmt.reply{margin-left:clamp(20px,5vw,60px);border-top:1px solid var(--line)}
.cmt .avatar{width:44px;height:44px}
.cmt-top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:7px}
.cmt-top strong{font-size:14px;font-weight:700}
.cmt-top .badge{font-size:8.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);padding:2px 7px;border-radius:100px}
.cmt-top time{font-size:11px;color:var(--muted);font-weight:500}
.cmt p{font-size:14.5px;font-weight:300;line-height:1.68;color:#CFD4D6}
.cmt-actions{display:flex;gap:18px;margin-top:11px}
.cmt-actions button{background:none;border:none;color:var(--muted);font-family:var(--font);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:color .3s}
.cmt-actions button:hover{color:var(--accent)}
.cmt-actions button.liked{color:var(--accent)}
.load-more{margin-top:24px;width:100%;text-align:center}
/* ===== SIDEBAR ===== */
.side{position:sticky;top:104px;display:flex;flex-direction:column;gap:26px}
.card{border:1px solid var(--line);border-radius:14px;background:linear-gradient(155deg,#0F141C,#08090E);overflow:hidden}
.card-head{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-head h3{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--paper)}
.card-head a{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.side-item{display:grid;grid-template-columns:74px 1fr;gap:14px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line);transition:background .3s,padding-left .4s var(--ease)}
.side-item:last-child{border-bottom:none}
.side-item:hover{background:color-mix(in srgb,var(--accent) 7%,transparent);padding-left:26px}
.side-thumb{width:74px;height:54px;border-radius:7px;overflow:hidden;background:#141922;flex:none}
.side-thumb img{width:100%;height:100%;object-fit:cover;opacity:.8;transition:transform .8s var(--ease),opacity .4s}
.side-item:hover .side-thumb img{transform:scale(1.1);opacity:1}
.side-item h4{font-size:13.5px;font-weight:600;line-height:1.32;letter-spacing:-.01em;margin-bottom:5px}
.side-item .m{font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.rank{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:baseline;padding:14px 20px;border-bottom:1px solid var(--line);transition:background .3s}
.rank:last-child{border-bottom:none}
.rank:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.rank .n{font-size:26px;font-weight:200;letter-spacing:-.05em;color:var(--accent);line-height:1}
.rank h4{font-size:13.5px;font-weight:600;line-height:1.35}
.rank .m{font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.side-cta{padding:24px 20px;background:radial-gradient(120% 120% at 88% 6%,var(--accent-soft),transparent 60%)}
.side-cta h3{font-size:clamp(1.15rem,1.6vw,1.4rem);font-weight:200;letter-spacing:-.04em;line-height:1.1;margin:12px 0 8px}
.side-cta h3 b{font-weight:800}
.side-cta p{font-size:12.5px;font-weight:300;color:var(--dim);margin-bottom:16px}
.side-cta input{width:100%;background:rgba(0,0,0,.45);border:1px solid var(--line-2);border-radius:100px;color:var(--paper);font-family:var(--font);font-size:13px;padding:12px 16px;margin-bottom:10px}
.side-cta input:focus{outline:none;border-color:var(--accent)}
.side-cta button{width:100%;background:var(--accent);color:var(--accent-ink);border:none;padding:12px;border-radius:100px;font-family:var(--font);font-size:12.5px;font-weight:700;cursor:pointer}
/* ===== RELATED ===== */
.related{border-top:1px solid var(--line);padding:clamp(50px,7vw,90px) 0;position:relative;overflow:hidden;background:var(--wash)}
.rel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.rel-head h2{font-size:clamp(1.7rem,3.4vw,2.8rem);font-weight:200;letter-spacing:-.04em}
.rel-head h2 b{font-weight:800}
.rel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:900px){.rel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.rel-grid{grid-template-columns:1fr}}
.rel{position:relative;height:300px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#0d1016;transition:transform .5s var(--ease),border-color .4s,box-shadow .5s}
.rel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.66;transition:transform 1s var(--ease),opacity .5s}
.rel::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,6,9,.95) 10%,transparent 74%)}
.rel-body{position:absolute;inset:auto 0 0 0;z-index:2;padding:18px}
.rel h4{font-size:15px;font-weight:600;line-height:1.28;margin-top:10px}
.rel .m{font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:8px;display:block}
.rel:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent) 45%,transparent);box-shadow:0 26px 54px rgba(0,0,0,.55)}
.rel:hover img{transform:scale(1.08);opacity:.85}
footer{border-top:1px solid var(--line);padding:40px 0 52px}
.foot-social{display:flex;gap:20px;flex-wrap:wrap}
.foot-social a{font-size:12.5px;font-weight:500;color:var(--dim);transition:color .3s}
/* ===== SEARCH (shared) ===== */
.search-overlay.open{display:block}
.search-panel{max-width:760px;margin:0 auto;background:var(--ink-3);border:1px solid var(--line-2);border-radius:16px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.7)}
.search-bar svg{flex:none;color:var(--accent)}
.search-bar input{flex:1;background:none;border:none;color:var(--paper);font-family:var(--font);font-size:19px;font-weight:300}
.sr{display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:center;padding:14px 22px;border-bottom:1px solid var(--line)}
.sr:hover,.sr.sel{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.sr h5{font-size:14.5px;font-weight:600;line-height:1.3;margin-bottom:5px}
.sr-meta em{font-style:normal;color:var(--accent)}
.sr mark{background:none;color:var(--accent)}
.search-empty{padding:40px 22px;text-align:center;color:var(--dim);font-weight:300}
@media (max-width:1080px){
  .art-grid{grid-template-columns:58px minmax(0,1fr)}
  .side{position:static;grid-column:1 / -1;flex-direction:row;flex-wrap:wrap}
  .side .card{flex:1 1 300px}
}
@media (max-width:820px){
  .nav-toggle{display:flex}
  nav{display:none;position:absolute;top:calc(100% + 16px);left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;background:var(--ink-3);border:1px solid var(--line);border-radius:12px;padding:8px;z-index:220}
  nav.open{display:flex}
  nav a{padding:13px 14px;border-radius:8px}
  nav a::after{display:none}
  .art-grid{grid-template-columns:minmax(0,1fr)}
  .share-rail{position:static;flex-direction:row;justify-content:flex-start;flex-wrap:wrap;margin-bottom:20px}
  .share-rail .cap{writing-mode:horizontal-tb;margin:0 4px 0 0;align-self:center}
  .p2,.p3,.p4,.p5,.p6{display:none}
  .theme-switch{display:none}
}
@media (max-width:560px){
  .side-item{grid-template-columns:60px 1fr}
  .side-thumb{width:60px;height:46px}
  .author-box{flex-direction:column;gap:14px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}
/* ===================== CATEGORY / ARCHIVE ===================== */
.theme-news{--accent:var(--cyan);--accent-soft:var(--cyan-soft);
  --wash:radial-gradient(70% 45% at 12% 0%,rgba(24,74,96,.34),transparent 62%),
         radial-gradient(60% 45% at 90% 8%,rgba(92,70,32,.26),transparent 62%)}
.cat-head{position:relative;overflow:hidden;padding:clamp(46px,7vw,96px) 0 clamp(34px,4vw,58px);background:var(--wash)}
.cat-head::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 55%,transparent),transparent)}
.cat-head .wrap{position:relative;z-index:2}
.cat-head h1{margin:16px 0 18px;font-size:clamp(2.6rem,7vw,5.4rem)}
.cat-head .lede{max-width:52ch;font-size:clamp(15px,1.4vw,18px)}
/* sticky filter bar */
.filterbar{position:sticky;top:64px;z-index:90;background:color-mix(in srgb,var(--ink) 82%,transparent);
  backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid var(--line)}
.filterbar-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0;flex-wrap:wrap}
.chips{display:flex;gap:8px;flex-wrap:wrap;min-width:0}
.chip{font-size:12px;font-weight:600;padding:8px 15px;border-radius:100px;border:1px solid var(--line);
  color:var(--dim);background:none;cursor:pointer;font-family:var(--font);white-space:nowrap;transition:.3s var(--ease)}
.chip:hover{border-color:var(--line-2);color:var(--paper)}
.chip.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.controls{display:flex;align-items:center;gap:10px}
.sel{position:relative}
.sel select{appearance:none;background:none;border:1px solid var(--line);border-radius:100px;color:var(--paper);
  font-family:var(--font);font-size:12px;font-weight:600;padding:9px 34px 9px 15px;cursor:pointer}
.sel select:focus{outline:none;border-color:var(--accent)}
.sel svg{position:absolute;top:50%;right:13px;transform:translateY(-50%);pointer-events:none;color:var(--dim)}
[dir="rtl"] .sel select{padding:9px 15px 9px 34px}
[dir="rtl"] .sel svg{right:auto;left:13px}
.viewtog{display:flex;border:1px solid var(--line);border-radius:100px;padding:3px;gap:2px}
.viewtog button{background:none;border:none;color:var(--muted);width:34px;height:30px;border-radius:100px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.3s}
.viewtog button.on{background:var(--accent-soft);color:var(--accent)}
/* body */
.cat-body{padding:clamp(38px,5vw,64px) 0 clamp(60px,8vw,100px);position:relative;overflow:hidden}
.lead-card{position:relative;display:grid;grid-template-columns:1.15fr 1fr;gap:0;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);background:linear-gradient(150deg,#101720,#08090E);margin-bottom:clamp(28px,4vw,48px);
  transition:border-color .5s,transform .5s var(--ease)}
.lead-card:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent);transform:translateY(-4px)}
.lead-shot{position:relative;aspect-ratio:16/10;overflow:hidden;background:#12161d}
.lead-shot img{width:100%;height:100%;object-fit:cover;opacity:.82;transition:transform 1.1s var(--ease),opacity .5s}
.lead-card:hover .lead-shot img{transform:scale(1.05);opacity:1}
.lead-body{padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;justify-content:center}
.lead-body h2{font-weight:300;font-size:clamp(1.4rem,2.6vw,2.2rem);line-height:1.14;letter-spacing:-.035em;margin:14px 0 12px}
.lead-body h2 b{font-weight:800}
.lead-body p{font-size:14.5px;font-weight:300;color:var(--dim);line-height:1.7;max-width:46ch}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(266px,1fr));gap:clamp(18px,2vw,26px)}
.card{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(155deg,#141a22,#0A0C11);display:flex;flex-direction:column;
  transition:transform .5s var(--ease),border-color .4s,box-shadow .5s var(--ease)}
.card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  box-shadow:0 26px 54px rgba(0,0,0,.5)}
.card-shot{position:relative;aspect-ratio:16/10;overflow:hidden;background:#12161d;flex:none}
.card-shot img{width:100%;height:100%;object-fit:cover;opacity:.76;transition:transform 1s var(--ease),opacity .5s}
.card:hover .card-shot img{transform:scale(1.07);opacity:1}
.card-shot .ph{position:absolute;top:12px;inset-inline-start:12px;z-index:3;font-size:8.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:#0B0D12;background:rgba(255,255,255,.72);padding:4px 8px;border-radius:100px}
.card-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.card h3{font-weight:600;font-size:16px;line-height:1.32;letter-spacing:-.015em}
.card .ex{font-size:13px;font-weight:300;color:var(--dim);line-height:1.6}
.card-foot{margin-top:auto;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-top:1px solid var(--line);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.card-foot em{font-style:normal;color:var(--accent)}
.card-foot svg{color:var(--accent);transition:transform .45s var(--ease)}
.card:hover .card-foot svg{transform:translateX(5px)}
[dir="rtl"] .card:hover .card-foot svg{transform:translateX(-5px)}
/* list view */
.cards.list{grid-template-columns:1fr;gap:0}
.cards.list .card{flex-direction:row;border-radius:0;border-width:0 0 1px 0;background:none;align-items:stretch}
.cards.list .card:hover{transform:none;box-shadow:none;background:color-mix(in srgb,var(--accent) 6%,transparent)}
.cards.list .card-shot{width:clamp(120px,18vw,220px);aspect-ratio:16/11;border-radius:10px;margin:16px;flex:none}
.cards.list .card-body{padding:20px 16px;justify-content:center}
.cards.list .ex{max-width:70ch}
.cards.list .card-foot{border-top:none;padding-top:8px}
.empty{padding:70px 20px;text-align:center;color:var(--dim);font-weight:300;font-size:15.5px;
  border:1px dashed var(--line-2);border-radius:14px}
.cat-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:36px}
.showing{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
/* prop placement for the category masthead — all clear of the headline column */
.cat-head .o-cine{inset-inline-end:1%;top:9%;width:clamp(92px,11.5vw,180px)}
.cat-head .o-corn1{inset-inline-end:27%;top:7%;width:clamp(30px,3.8vw,56px)}
.cat-head .o-corn2{inset-inline-end:13%;bottom:12%;width:clamp(26px,3.3vw,48px)}
.cat-head .o-corn3{inset-inline-end:35%;bottom:7%;width:clamp(23px,3vw,44px)}
.cat-head .o-corn4{inset-inline-end:6%;bottom:34%;width:clamp(22px,2.9vw,42px)}
.cat-head .o-corn5{inset-inline-end:45%;top:15%;width:clamp(20px,2.7vw,38px)}
.cat-head .o-soccer{inset-inline-end:2%;top:11%;width:clamp(84px,10.5vw,164px)}
.cat-head .o-cricket{inset-inline-end:25%;bottom:11%;width:clamp(48px,6.2vw,96px)}
.cat-head .o-whistle{inset-inline-end:9%;bottom:29%;width:clamp(56px,7.2vw,112px)}
.cat-head .o-gridiron{inset-inline-end:37%;top:11%;width:clamp(52px,6.8vw,100px)}
.cat-head .o-news1{inset-inline-end:2%;top:9%;width:clamp(74px,9.2vw,142px)}
.cat-head .o-news2{inset-inline-end:23%;bottom:11%;width:clamp(62px,8vw,120px)}
@media (max-width:900px){
  .cat-head .o-corn2,.cat-head .o-corn3,.cat-head .o-corn4,.cat-head .o-corn5,.cat-head .o-cricket,.cat-head .o-gridiron,.cat-head .o-news2{display:none}
  .cat-head .obj{opacity:.55}
}
@media (max-width:820px){
  .lead-card{grid-template-columns:1fr}
  .filterbar{top:58px}
  .filterbar-row{gap:12px}
  .controls{width:100%;justify-content:space-between}
  .cards.list .card{flex-direction:column}
  .cards.list .card-shot{width:auto;margin:0;border-radius:0}
}
.chart .tile{flex:0 0 clamp(238px,25vw,296px)}
:root{--grey-a:#B8BEC6;--grey-soft:rgba(184,190,198,.12)}
.theme-top10 .cat-head{background:radial-gradient(80% 50% at 84% 0%,rgba(64,70,79,.44),transparent 62%),
  radial-gradient(60% 42% at 6% 18%,rgba(184,190,198,.08),transparent 60%)}
.chart{margin-bottom:6px}
.tagrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 clamp(22px,2.6vw,34px)}
.tagrow a{font-size:12.5px;font-weight:600;padding:8px 15px;border-radius:100px;border:1px solid var(--line);
  color:var(--dim);white-space:nowrap;transition:.32s cubic-bezier(.22,1,.36,1)}
@media (max-width:560px){
  .side-item{grid-template-columns:60px 1fr}
  .side-thumb{width:60px;height:46px}
  }
/* ═══════════════ SEARCH RESULTS · TAG · 404 · PAGE · AUTHOR ═══════════════ */
.theme-neutral{--accent:var(--cyan);--accent-soft:var(--cyan-soft);
  --wash:radial-gradient(70% 45% at 14% 0%,rgba(24,74,96,.32),transparent 62%),
         radial-gradient(60% 45% at 88% 10%,rgba(28,84,58,.22),transparent 62%)}
/* inline search field on the results page */
.sform{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px;max-width:560px}
.sform input{flex:1 1 260px;background:rgba(0,0,0,.42);border:1px solid var(--line-2);border-radius:100px;
  color:var(--paper);font-family:var(--font);font-size:14.5px;padding:14px 20px}
.sform input:focus{outline:none;border-color:var(--accent)}
.sform input::placeholder{color:var(--muted)}
.sform button{background:var(--accent);color:var(--accent-ink);border:none;padding:14px 28px;border-radius:100px;
  font-family:var(--font);font-size:13.5px;font-weight:700;cursor:pointer;transition:filter .3s}
.sform button:hover{filter:brightness(1.12)}
.suggest{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:22px}
.suggest .lbl{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.suggest a{font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:100px;border:1px solid var(--line);
  color:var(--dim);transition:.3s var(--ease)}
.suggest a:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
[dir="rtl"] .suggest .lbl{letter-spacing:normal;text-transform:none;font-size:1.06em}
/* 404 */
.big404{font-weight:900;font-size:clamp(7rem,22vw,18rem);line-height:.74;letter-spacing:-.07em;
  color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--accent) 48%,transparent);
  margin-bottom:8px;user-select:none}
.err-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
/* static page */
.page-body{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:clamp(28px,4vw,60px);
  align-items:start;padding-bottom:clamp(56px,8vw,100px)}
.page-body .prose{max-width:70ch}
.toc{position:sticky;top:104px;border-inline-start:1px solid var(--line);padding-inline-start:20px}
.toc h4{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.toc a{display:block;font-size:13.5px;font-weight:500;color:var(--dim);padding:7px 0;transition:color .3s}
.toc a:hover,.toc a.on{color:var(--accent)}
[dir="rtl"] .toc h4{letter-spacing:normal;text-transform:none;font-size:1.06em}
/* author */
.author-hero{display:flex;gap:clamp(18px,3vw,34px);align-items:center;flex-wrap:wrap}
.author-hero .ava{width:clamp(76px,9vw,108px);height:clamp(76px,9vw,108px);border-radius:100px;flex:none;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:clamp(26px,3.4vw,38px);
  letter-spacing:-.03em;background:var(--accent-soft);color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 32%,transparent)}
.author-hero p{max-width:52ch}
.au-stats{display:flex;gap:24px;flex-wrap:wrap;margin-top:18px}
.au-stats b{font-weight:200;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1;color:var(--accent);letter-spacing:-.05em}
.au-stats span{display:block;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-top:6px}
[dir="rtl"] .au-stats span{letter-spacing:normal;text-transform:none;font-size:1.06em}
@media (max-width:900px){
  .page-body{grid-template-columns:1fr}
  .toc{position:static;border:none;padding:0;border-top:1px solid var(--line);padding-top:18px}
}
/* ── WordPress-specific additions ─────────────────────────────── */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;top:-60px;inset-inline-start:16px;z-index:999;background:var(--accent);
  color:var(--accent-ink,#04201F);padding:10px 18px;border-radius:0 0 8px 8px;font-weight:700;
  transition:top .25s}
.skip-link:focus{top:0}
.logo img{width:132px;height:auto;display:block}
.foot-row .logo img{width:100px}

/* pagination, replacing the prototype's load-more button */
.pagination{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:clamp(30px,4vw,52px)}
.pagination .page-numbers{min-width:42px;height:42px;display:inline-flex;align-items:center;
  justify-content:center;padding:0 14px;border-radius:100px;border:1px solid var(--line);
  color:var(--dim);font-size:13.5px;font-weight:600;transition:.3s var(--ease)}
.pagination a.page-numbers:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.pagination .page-numbers.current{background:var(--accent);color:var(--accent-ink,#04201F);border-color:var(--accent)}
.pagination .dots{border:none}

/* no-featured-image fallback for cards and tiles */
.card--noimg .card-shot,.tile--noimg{position:relative;overflow:hidden;
  background:linear-gradient(155deg,color-mix(in srgb,var(--accent) 13%,#0C1016),#08090D)}
.card--noimg .card-shot .mark,.tile--noimg .mark{position:absolute;inset-inline-end:-4%;top:-10%;
  font-weight:900;font-size:9rem;line-height:.72;letter-spacing:-.06em;color:transparent;
  -webkit-text-stroke:1px color-mix(in srgb,var(--accent) 30%,transparent);pointer-events:none}

/* WordPress core block styles the editor will produce */
.prose figure{margin:2em 0}
.prose figure img{border-radius:12px;width:100%;height:auto}
.prose figcaption{margin-top:10px;font-size:12.5px;color:var(--muted);font-weight:300;text-align:center}
.prose .wp-block-quote{margin:2.2em 0;padding-inline-start:30px;border-inline-start:2px solid var(--accent);
  font-size:clamp(1.1rem,1.9vw,1.5rem);font-weight:200;letter-spacing:-.03em;line-height:1.3;color:var(--paper)}
.prose .wp-block-quote cite{display:block;margin-top:14px;font-size:11px;font-weight:600;font-style:normal;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.prose .wp-block-pullquote{border-block:1px solid var(--line);padding:2em 0;margin:2.4em 0;text-align:center}
.prose .wp-block-image.alignwide,.prose .alignwide{margin-inline:calc(-6vw);max-width:none}
.prose .wp-block-table{width:100%;overflow-x:auto;margin:2em 0}
.prose table{width:100%;border-collapse:collapse;font-size:14.5px}
.prose th,.prose td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:start}
.prose th{font-weight:700;color:var(--paper);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.prose .wp-block-gallery{margin:2em 0}
.prose .wp-block-embed{margin:2em 0}
.prose .wp-block-embed iframe{width:100%;aspect-ratio:16/9;height:auto;border-radius:12px;border:0}
.prose .wp-block-button__link{display:inline-block;background:var(--accent);color:var(--accent-ink,#04201F);
  padding:12px 26px;border-radius:100px;font-weight:700;font-size:13.5px;text-decoration:none}
.prose .wp-block-separator{border:none;border-top:1px solid var(--line);margin:2.4em 0}
.prose ol{margin:0 0 1.35em;padding-inline-start:22px}
.prose ol li{margin-bottom:.6em}
.prose code{font-family:ui-monospace,monospace;font-size:.92em;background:rgba(255,255,255,.06);
  padding:2px 6px;border-radius:4px}
.prose pre{background:rgba(0,0,0,.4);border:1px solid var(--line);border-radius:10px;padding:18px;
  overflow-x:auto;margin:2em 0}
.prose .wp-caption{max-width:100%}
.cards .card.sticky{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}

/* Top 10 inline rank on a single entry */
.t10-inline{color:var(--accent);font-weight:800;margin-inline-end:.2em}

/* comments are disabled by design, but style them in case they are re-enabled */
.comment-respond{margin-top:40px}

.rail-foot .cta{text-transform:none}

/* ══════════════════════════════════════════════════════════════
   1.0.3 — WordPress integration fixes
   ══════════════════════════════════════════════════════════════ */

/* Custom logo: constrain it, whatever size was uploaded. */
.logo{display:inline-flex;align-items:center;line-height:0;max-width:180px}
.logo img,.logo .logo-img{width:auto;max-width:100%;max-height:34px;height:auto;display:block}
.foot-row .logo{max-width:120px}
.foot-row .logo img,.foot-row .logo .logo-img{max-height:26px}

/* wp_nav_menu prints <li> items; keep the nav a clean flex row. */
nav li{list-style:none;display:inline-flex;margin:0;padding:0}
nav ul{list-style:none;display:flex;gap:28px;align-items:center;margin:0;padding:0}
.foot-social li{list-style:none;display:inline-flex}
.foot-social ul{display:flex;gap:20px;flex-wrap:wrap;list-style:none;margin:0;padding:0}

/* Current section keeps its underline. WordPress adds these classes. */
nav .current-menu-item > a,
nav .current-menu-parent > a,
nav .current-menu-ancestor > a,
nav .current-category-ancestor > a,
nav .current_page_item > a,
nav a[aria-current="page"]{color:var(--paper)}
nav .current-menu-item > a::after,
nav .current-menu-parent > a::after,
nav .current-menu-ancestor > a::after,
nav .current-category-ancestor > a::after,
nav .current_page_item > a::after,
nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:0 50%}
[dir="rtl"] nav .current-menu-item > a::after,
[dir="rtl"] nav .current-menu-parent > a::after,
[dir="rtl"] nav .current-category-ancestor > a::after{transform-origin:100% 50%}
@media (max-width:900px){
  nav ul{flex-direction:column;align-items:stretch;gap:2px;width:100%}
  nav li{display:block;width:100%}
  nav li a{display:block;width:100%}
}

/* Top 10 archive: same box as the home rail, laid out as a grid. */
.chart-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:clamp(20px,2.4vw,34px);row-gap:clamp(30px,3.4vw,48px);align-items:start}
.chart-grid .t10{padding-inline-start:clamp(30px,3.6vw,58px)}
.chart-grid .t10 > .tile{display:block;width:100%;height:clamp(330px,38vw,410px)}

/* Article tags row — make sure it is visible even with no bottom content. */
.tags{display:flex;gap:9px;flex-wrap:wrap;margin:36px 0 0;padding-top:26px;border-top:1px solid var(--line)}

/* Newsletter sits inside a normal section on the front page. */
.subscribe{margin-top:0}

/* ══════════════ 1.0.4 ══════════════ */

/* Newsroom is now a full section like Entertainment and Sports. */
.zone-news{--accent:var(--cyan);--accent-soft:var(--cyan-soft);
  background:
    radial-gradient(88% 60% at 18% 0%,rgba(38,52,72,.42),transparent 62%),
    radial-gradient(70% 55% at 90% 100%,rgba(122,255,251,.05),transparent 58%),
    linear-gradient(180deg,#080A0F,#06070A)}
.zone-news .obj img{opacity:.62;filter:saturate(.35) brightness(.9) contrast(.98)}

/* Tag chips inside a home section sit under the heading block. */
.zone .tagrow{margin-top:-8px;margin-bottom:clamp(22px,2.6vw,32px)}

/* ══════════════ 1.0.5 ══════════════ */

/*
 * Paint the page background on <html> too, with a literal colour.
 * If a custom property ever fails to resolve, the page still renders dark
 * instead of falling back to the browser's white canvas.
 */
html{background-color:#06070A}
body{background-color:#06070A}

/* Newsroom keeps the feature + list layout inside its own section. */
.zone-news .grid{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(24px,3vw,44px);align-items:start}
@media (max-width:900px){.zone-news .grid{grid-template-columns:1fr}}
.zone-news .stories-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-bottom:26px}
.zone-news .feature,.zone-news .post-list{position:relative;z-index:4}

/* ══════════════ 1.0.6 ══════════════ */
/*
 * The page is designed dark. Declaring the colour scheme stops Chrome's
 * "Auto Dark Mode for Web Contents" and similar re-colouring layers from
 * inverting it — which showed up as the page flashing pale on interaction.
 */
:root{color-scheme:dark}
html,body{color-scheme:dark;forced-color-adjust:none}
img,video,.obj img{forced-color-adjust:none}

/* ══════════════ 1.0.8 ══════════════
   WordPress adds its own classes to <body> and <article>: on a tag archive the
   body literally gets class="tag", on a single post the article gets "post".
   Any bare rule with those names ends up styling the whole page. Every such
   selector in this theme is scoped to its own container, and the guard below
   makes sure a future one cannot leak either.
   ══════════════════════════════════════════════════════════════════════ */
body.tag,body.category,body.archive,body.search,body.author,body.date,
body.single,body.page,body.home,body.blog,body.error404{
  background-color:#06070A;
  color:var(--paper);
  border:0;
}
body.tag:hover,body.category:hover,body.archive:hover,body.search:hover,
body.author:hover,body.date:hover,body.single:hover,body.page:hover{
  background-color:#06070A;
  color:var(--paper);
}