/*
Theme Name: Sports in Europe
Theme URI: https://test.techdirectsupport.si/
Author: Sports in Europe
Description: Editorial European sports magazine theme. Pair with the included content import file.
Version: 1.6.0
Requires at least: 5.8
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: sports-in-europe
*/
:root{--navy:#0b1f3a;--ink:#1c2b44;--muted:#4a5a73;--red:#c8102e;--line:#dfe5ee;--bg:#fff;--soft:#f4f6fa;--r:10px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:1.0625rem/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg)}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-decoration-color:rgba(200,16,46,.6);text-underline-offset:3px}
a:hover{color:var(--red)}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;color:var(--navy);line-height:1.2;margin:0 0 .6em}
h1{font-size:clamp(1.9rem,4.5vw,2.8rem)}
h2{font-size:clamp(1.4rem,3vw,1.8rem);margin-top:1.6em}
h3{font-size:1.2rem}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.wrap.narrow{max-width:800px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:8px;top:8px}
/* header */
.site-header{border-bottom:3px solid var(--red);background:#fff;position:sticky;top:0;z-index:50}
.hdr{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:70px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:1.5rem Georgia,serif;color:var(--navy)}
.logo strong{color:var(--red)}
.nav-toggle{display:inline-flex;background:none;border:1px solid var(--line);border-radius:8px;padding:12px;cursor:pointer}
.bars,.bars:before,.bars:after{display:block;width:22px;height:2px;background:var(--navy);content:"";position:relative}
.bars:before{position:absolute;top:-7px}.bars:after{position:absolute;top:7px}
#nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);padding:8px 16px 16px}
#nav.open{display:block}
#nav ul{list-style:none;margin:0;padding:0}
#nav a,.more-btn{display:block;padding:12px 8px;text-decoration:none;font-weight:600;color:var(--navy);width:100%;text-align:left;background:none;border:0;font-size:1rem;cursor:pointer;font-family:inherit}
#nav a:hover,.more-btn:hover{color:var(--red)}
#nav a[aria-current],.more-btn.active{color:var(--red);box-shadow:inset 3px 0 var(--red);padding-left:12px}
#more-menu{display:none;padding-left:16px}#more-menu.open{display:block}
@media(min-width:900px){
.nav-toggle{display:none}
#nav{display:block!important;position:static;border:0;padding:0}
#nav>ul{display:flex;gap:2px;align-items:center}
#nav a,.more-btn{padding:10px 12px;width:auto;border-radius:6px}
#nav a[aria-current],.more-btn.active{box-shadow:inset 0 -3px var(--red);padding-left:12px;border-radius:0}
.more{position:relative}
#more-menu{position:absolute;right:0;top:100%;min-width:180px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 24px rgba(11,31,58,.15);padding:6px;border-radius:8px}
}
/* common */
.kicker{font:700 .78rem/1 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--red);margin:0 0 .6em}
.kicker a{color:inherit;text-decoration:none}
.meta,.small{font-size:.875rem;color:var(--muted)}
.lead{font-size:1.2rem;color:var(--muted)}
.notice{background:var(--soft);border-left:4px solid var(--red);padding:12px 16px;border-radius:0 var(--r) var(--r) 0;margin:20px 0;font-size:.95rem}
.btn{display:inline-block;background:var(--navy);color:#fff;padding:12px 22px;border-radius:8px;font-weight:700;text-decoration:none;border:0;font:inherit;font-weight:700;cursor:pointer}
.btn:hover{background:var(--red);color:#fff}
.btn:disabled{opacity:.6;cursor:not-allowed}.btn:disabled:hover{background:var(--navy)}
mark.ph{background:#fff3b0;color:#4a3b00;padding:0 4px;border-radius:3px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:16px 0 4px;margin:0;font-size:.875rem;color:var(--muted)}
.crumbs li+li:before{content:"/";margin-right:6px;color:#8a97ab}
/* hero */
.hero{display:grid;gap:20px;margin:24px 0 36px}
.hero-img img{border-radius:var(--r);aspect-ratio:16/9;object-fit:cover;width:100%}
.hero h1 a{text-decoration:none}
@media(min-width:900px){.hero{grid-template-columns:1.4fr 1fr;align-items:center;gap:36px}}
/* grid / cards */
.block{margin:40px 0}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--navy);margin-bottom:20px}
.sec-h h2{margin:0 0 8px}
.sec-h a{font-weight:700;font-size:.9rem}
.grid{display:grid;gap:24px;grid-template-columns:1fr}
@media(min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.grid{grid-template-columns:repeat(3,1fr)}.cols .grid{grid-template-columns:repeat(2,1fr)}.g4{grid-template-columns:repeat(4,1fr)!important}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.card:hover{box-shadow:0 10px 28px rgba(11,31,58,.12);transform:translateY(-2px)}
.card-img img{aspect-ratio:16/9;object-fit:cover;width:100%}
.card-b{padding:16px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:1.15rem;margin-bottom:.4em}
.card h3 a{text-decoration:none}
.card p{margin:0 0 .6em;font-size:.95rem}
.card .meta{margin-top:auto}
/* layout columns */
.cols{display:grid;gap:32px}
@media(min-width:1000px){.cols{grid-template-columns:1fr 320px}}
.panel{background:var(--soft);border-radius:var(--r);padding:20px;margin-bottom:20px}
.panel h2{font-size:1.2rem;margin:0 0 .6em}
.trend{padding-left:1.2em;margin:0}.trend li{margin-bottom:.6em;font-weight:600}
.plain{list-style:none;padding:0;margin:0}.plain li{padding:6px 0;border-bottom:1px solid var(--line)}
.nl label{display:block;font-weight:600;margin-bottom:4px}
.nl input{width:100%;padding:11px;border:1px solid #9aa7bb;border-radius:8px;margin-bottom:10px;font:inherit}
.chips{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chips a{display:inline-block;border:1px solid var(--navy);border-radius:999px;padding:6px 16px;text-decoration:none;font-weight:600}
.chips a:hover{background:var(--navy);color:#fff}
.cat-h{background:linear-gradient(120deg,var(--c1),var(--c2));color:#fff;border-radius:var(--r);padding:40px 28px;margin:12px 0 32px;border-bottom:6px solid var(--red)}
.cat-h h1{color:#fff;margin:0 0 .3em}.cat-h p{margin:0;font-size:1.15rem;max-width:60ch}
/* article */
.art-h{margin:12px 0 20px}
.byline{color:var(--muted);font-size:.92rem}
.feat{margin:0 0 20px}.feat img{border-radius:var(--r);width:100%;aspect-ratio:16/9;object-fit:cover}
.feat figcaption{font-size:.82rem;color:var(--muted);margin-top:6px}
.toc{border:1px solid var(--line);border-radius:var(--r);padding:16px 20px;margin:24px 0}
.toc h2{font-size:1.1rem;margin:0 0 .4em}.toc ol{margin:0;padding-left:1.2em}
.prose{font-size:1.125rem}.prose h2{border-top:1px solid var(--line);padding-top:.8em}
.prose li{margin-bottom:.4em}
.share{border-top:1px solid var(--line);margin-top:36px}
.share ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.share a{display:inline-block;padding:8px 16px;border:1px solid var(--navy);border-radius:8px;text-decoration:none;font-weight:600;font-size:.92rem}
.share a:hover{background:var(--navy);color:#fff}
/* footer */
.site-footer{background:var(--navy);color:#dbe3f0;margin-top:60px;padding:40px 0 24px;border-top:6px solid var(--red)}
.site-footer a{color:#fff}.site-footer h2{color:#fff;font-size:1.05rem;margin:0 0 .6em}
.site-footer ul{list-style:none;padding:0;margin:0}.site-footer li{margin-bottom:.4em}
.f-grid{display:grid;gap:28px}.f-logo{font:1.4rem Georgia,serif;color:#fff;margin:0 0 .4em}.f-logo strong{color:#ff6b81}
@media(min-width:800px){.f-grid{grid-template-columns:1.5fr 1fr 1fr}}
.f-small{border-top:1px solid #2a4066;margin-top:28px;padding-top:16px;font-size:.85rem}
.site-footer mark.ph{background:#fff3b0}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ===== v1.2 editorial redesign ===== */
:root{--cc:#c8102e;--paper:#faf8f4;--serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif}
body{background:var(--paper)}
h1,h2,h3,.logo,.f-logo{font-family:var(--serif)}
.c-football{--cc:#16875f}.c-basketball{--cc:#d2601a}.c-tennis{--cc:#6f9a12}.c-formula-1{--cc:#c8102e}
.c-cycling{--cc:#b58900}.c-rugby{--cc:#3f51c1}.c-athletics{--cc:#b8324f}.c-winter-sports{--cc:#2584c0}
.kicker,.kicker a{color:var(--cc)}
.site-header{background:var(--paper);border-bottom:1px solid var(--navy);box-shadow:0 3px 0 var(--red)}
.topline{background:var(--navy);color:#cfd9ea;font-size:.85rem;padding:8px 0}
.topline span{color:#fff;font-weight:700;margin-right:4px}
/* hero */
.hero2{display:grid;gap:24px;margin:28px 0}
.h2-main{position:relative;display:block;border-radius:4px;overflow:hidden;color:#fff;text-decoration:none;min-height:340px;background:var(--navy)}
.h2-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h2-main:before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,15,32,.95) 5%,rgba(5,15,32,.35) 70%);z-index:1}
.h2-txt{position:relative;z-index:2;display:block;padding:clamp(20px,4vw,40px);margin-top:140px}
.h2-main .kicker{display:block;color:#fff;background:var(--cc);padding:4px 10px;width:max-content;max-width:100%;margin-bottom:14px}
.h2-main h1{color:#fff;font-size:clamp(1.8rem,4.2vw,3rem);margin:0 0 .4em;max-width:20ch}
.h2-ex{display:block;max-width:56ch;color:#e3eaf5;margin-bottom:.6em}
.h2-main .meta{color:#b8c6dc}
.h2-main:hover h1{text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:6px}
.h2-side{border-top:4px solid var(--navy);padding-top:10px}
.h2-side h2{font-size:1rem;text-transform:uppercase;letter-spacing:.12em;margin:0 0 8px;font-family:system-ui,sans-serif}
.h2-side ol{list-style:none;margin:0;padding:0}
.h2-side li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.num{font:700 2rem/1 var(--serif);color:var(--cc);min-width:1.4ch}
.h2-side a{font:700 1.1rem/1.3 var(--serif);text-decoration:none}
.h2-side .kicker{margin:0 0 4px}
@media(min-width:960px){.hero2{grid-template-columns:2.2fr 1fr}.h2-main{min-height:480px}}
/* tiles */
.tiles{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.tiles a{display:block;padding:14px 16px;background:#fff;border:1px solid var(--line);border-left:6px solid var(--cc);text-decoration:none;border-radius:3px}
.tiles strong{display:block;font-family:var(--serif);font-size:1.1rem;color:var(--navy)}
.tiles span{font-size:.8rem;color:var(--muted)}
.tiles a:hover{background:var(--cc)}.tiles a:hover strong,.tiles a:hover span{color:#fff}
@media(min-width:760px){.tiles{grid-template-columns:repeat(4,1fr)}}
/* rows */
.rows{display:block}
.row{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.row-img img{aspect-ratio:1/1;object-fit:cover;width:100%;border-radius:3px}
.row h3{font-size:1.2rem;margin:0 0 .3em}.row h3 a{text-decoration:none}.row h3 a:hover{color:var(--cc)}
.row-x{display:none;margin:0 0 .4em;color:var(--muted);font-size:.95rem}
.row .kicker{margin:0 0 4px}.row .meta{margin:0}
@media(min-width:640px){.row{grid-template-columns:230px 1fr;gap:22px}.row-img img{aspect-ratio:16/10}.row-x{display:block}}
/* cards + sections */
.card{border-radius:3px;border:0;border-top:4px solid var(--cc);box-shadow:0 1px 0 var(--line);background:#fff}
.card:hover{transform:none;box-shadow:0 8px 20px rgba(11,31,58,.12)}
.card h3 a:hover{color:var(--cc)}
.sec-h{border-bottom:0;border-top:4px solid var(--navy);padding-top:8px}
.block.c-football .sec-h,.block.c-basketball .sec-h,.block.c-tennis .sec-h,.block.c-formula-1 .sec-h{border-top-color:var(--cc)}
.sec-h h2{font-size:1.4rem}
.duo{display:grid;gap:0 32px}
.duo .grid{grid-template-columns:1fr!important}
@media(min-width:900px){.duo{grid-template-columns:1fr 1fr}.duo .grid{grid-template-columns:1fr 1fr!important}}
.panel{background:#fff;border:1px solid var(--line);border-top:4px solid var(--navy);border-radius:3px}
.panel-dark{background:var(--navy);color:#dbe3f0;border-color:var(--red)}.panel-dark h2{color:#fff}
.panel-dark .nl label{color:#fff}
/* band */
.band{background:var(--navy);color:#dbe3f0;padding:48px 0;margin-top:48px;border-top:6px solid var(--red)}
.band h2{color:#fff;margin-top:0}.band .lead{color:#b8c6dc}
.comp{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:24px}
.comp li{border-top:3px solid var(--cc);padding-top:12px}
.comp .num{display:block;font-size:2.4rem;color:#fff;opacity:.9}
.comp a{color:#fff;font:700 1.15rem/1.3 var(--serif);text-decoration:none}.comp a:hover{text-decoration:underline}
.comp p{font-size:.92rem;color:#b8c6dc;margin:.5em 0 0}
@media(min-width:900px){.comp{grid-template-columns:repeat(4,1fr)}}
/* category header */
.cat-h{border-radius:3px;border-bottom:0;border-left:10px solid var(--red)}
/* article */
.art-wrap{max-width:1060px}
.art-h h1{font-size:clamp(2rem,5vw,3.2rem);max-width:22ch}
.art-h .kicker a{color:var(--cc)}
.feat img{border-radius:3px}
.art-cols{display:grid;gap:8px}
@media(min-width:960px){.art-cols{grid-template-columns:230px minmax(0,1fr);gap:56px}.art-side{position:sticky;top:90px;align-self:start}}
.art-side .toc{border:0;border-left:3px solid var(--cc);border-radius:0;padding:4px 0 4px 14px;margin:20px 0}
.art-side .toc ol{list-style:none;padding:0}.art-side .toc li{margin-bottom:.5em;font-size:.92rem;line-height:1.4}
.art-side .toc a{text-decoration:none}.art-side .toc a:hover{color:var(--cc)}
.art-side .share{border:0;margin:0}.art-side .share h2{font-size:.9rem;text-transform:uppercase;letter-spacing:.1em;font-family:system-ui,sans-serif}
.art-side .share ul{gap:6px}.art-side .share a{padding:4px 12px;font-size:.85rem}
.prose{font-size:1.15rem;line-height:1.75;max-width:68ch}
.prose{counter-reset:s}
.prose>p.lead{font:italic 1.35rem/1.5 var(--serif);color:var(--navy);border-left:4px solid var(--cc);padding-left:18px;margin:0 0 1.2em}
.prose h2{border-top:0;padding-top:0;margin-top:2em}
.prose h2:before{counter-increment:s;content:counter(s,decimal-leading-zero) " —";display:block;font:700 .8rem/1 system-ui,sans-serif;letter-spacing:.14em;color:var(--cc);margin-bottom:.6em}
.prose ul{padding-left:1.2em}.prose li::marker{color:var(--cc)}
.prose h3{margin-top:1.4em}
.note{font-size:.88rem;color:var(--muted);border-top:1px solid var(--line);padding-top:14px;margin-top:2em}
.site-footer{background:#07152a}

/* ===== v1.3 modern look + motion ===== */
:root{--sans:Inter,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;--ease:cubic-bezier(.2,.8,.2,1);--red:#c8102e;--ink2:#0a1a33}
html{scroll-padding-top:90px}
body{font-family:var(--sans);background:#fff;background-image:radial-gradient(900px 420px at 88% -120px,rgba(200,16,46,.08),transparent 70%),radial-gradient(900px 480px at -10% 0,rgba(22,53,107,.09),transparent 70%);background-repeat:no-repeat;-webkit-font-smoothing:antialiased}
h1,h2,h3,.logo,.f-logo,.num,.h2-side a,.comp a,.tiles strong{font-family:var(--sans)}
h1,h2,h3{letter-spacing:-.03em;font-weight:800}
/* reveal on scroll */
.rv{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.14) translate(-1.5%,-1%)}}
@keyframes tk{to{transform:translateX(-50%)}}
@keyframes shift{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
/* header */
.site-header{background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);border-bottom:1px solid rgba(10,26,51,.08);box-shadow:none;transition:box-shadow .3s,background .3s}
.site-header.scrolled{box-shadow:0 10px 30px -10px rgba(10,26,51,.18)}
.logo{font-size:1.45rem;letter-spacing:-.03em;font-weight:500}
.logo img{transition:transform .6s var(--ease)}.logo:hover img{transform:rotate(-12deg) scale(1.08)}
#nav a,.more-btn{font-weight:600;transition:background .25s,color .25s}
@media(min-width:900px){
#nav a,.more-btn{border-radius:999px;padding:9px 16px}
#nav a:hover,.more-btn:hover{background:#eef1f7;color:var(--ink2)}
#nav a[aria-current],.more-btn.active{background:var(--ink2);color:#fff;box-shadow:none;border-radius:999px}
#more-menu{display:block;opacity:0;visibility:hidden;transform:translateY(10px) scale(.98);transform-origin:top right;transition:opacity .25s,transform .35s var(--ease),visibility .25s;border:1px solid rgba(10,26,51,.08);border-radius:18px;padding:8px;min-width:210px;box-shadow:0 24px 50px -16px rgba(10,26,51,.35);background:rgba(255,255,255,.96)}
#more-menu.open{opacity:1;visibility:visible;transform:none}
#more-menu a{border-radius:10px}
}
#nav.open{animation:pop .3s var(--ease);border-radius:0 0 20px 20px;box-shadow:0 24px 40px -20px rgba(10,26,51,.35)}
.progress{position:fixed;top:0;left:0;height:4px;width:0;background:linear-gradient(90deg,var(--red),#ff8a5c);z-index:200;transition:width .1s linear}
/* ticker */
.ticker{background:linear-gradient(90deg,#0a1a33,#16356b 60%,#0a1a33);color:#fff;overflow:hidden;white-space:nowrap;padding:10px 0;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700}
.tk-track{display:inline-flex;animation:tk 45s linear infinite;will-change:transform}
.tk-track span{padding:0 26px}.tk-track span:after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#ff4d6d;margin-left:52px;vertical-align:middle}
.ticker:hover .tk-track{animation-play-state:paused}
/* buttons / links */
.btn{border-radius:999px;background:linear-gradient(135deg,#c8102e,#e11d48);padding:13px 26px;box-shadow:0 12px 24px -10px rgba(200,16,46,.8);transition:transform .3s var(--ease),box-shadow .3s}
.btn:hover{background:linear-gradient(135deg,#c8102e,#e11d48);transform:translateY(-3px);box-shadow:0 18px 30px -10px rgba(200,16,46,.8)}
.card h3 a,.row h3 a,.comp a,.h2-side a{background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .45s var(--ease),color .2s}
.card h3 a:hover,.row h3 a:hover,.comp a:hover,.h2-side a:hover{background-size:100% 2px;text-decoration:none}
/* kicker pill */
.kicker{font-size:.7rem;letter-spacing:.1em}
.card .kicker a,.row .kicker a,.h2-side .kicker{display:inline-block;padding:4px 11px;border-radius:999px;background:color-mix(in srgb,var(--cc) 14%,#fff);color:color-mix(in srgb,var(--cc) 62%,#000)}
/* hero */
.hero2{gap:28px;margin:30px 0 34px}
.h2-main{border-radius:28px;box-shadow:0 40px 70px -28px rgba(10,26,51,.6);min-height:420px;isolation:isolate}
.h2-main img{animation:kb 22s ease-in-out infinite alternate}
.h2-main:before{background:linear-gradient(to top,rgba(6,14,30,.96) 8%,rgba(6,14,30,.45) 55%,rgba(6,14,30,.1))}
.h2-txt>*{animation:rise .9s var(--ease) both}
.h2-txt>*:nth-child(2){animation-delay:.1s}.h2-txt>*:nth-child(3){animation-delay:.2s}.h2-txt>*:nth-child(4){animation-delay:.3s}
.h2-main .kicker{border-radius:999px;padding:6px 14px;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.3);color:#fff}
.h2-main h1{font-weight:800;letter-spacing:-.035em;font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.05}
.h2-main:hover h1{text-decoration:none}
.h2-side{background:#fff;border:1px solid rgba(10,26,51,.08);border-radius:28px;padding:22px 24px;box-shadow:0 20px 40px -24px rgba(10,26,51,.35);animation:rise .9s .25s var(--ease) both}
.h2-side h2{font-family:var(--sans);margin:0 0 6px}
.h2-side li{border-bottom:1px solid #eef1f7;transition:transform .3s var(--ease)}
.h2-side li:last-child{border-bottom:0}
.h2-side li:hover{transform:translateX(6px)}
.num{font-weight:800;background:linear-gradient(135deg,var(--cc),var(--ink2));-webkit-background-clip:text;background-clip:text;color:var(--cc);-webkit-text-fill-color:transparent}
.h2-side a{font-size:1.05rem}
/* tiles */
.tiles{gap:14px;margin:6px 0 30px}
.tiles a{--tg:linear-gradient(135deg,color-mix(in srgb,var(--cc) 82%,#0a1a33),color-mix(in srgb,var(--cc) 38%,#0a1a33));position:relative;overflow:hidden;border:0;border-radius:20px;padding:22px 18px 38px;background:var(--cc);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.tiles li a,.tiles li a:hover{background:var(--tg)}
.tiles a:before{content:"";position:absolute;right:-28px;top:-28px;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.14);transition:transform .6s var(--ease)}
.tiles a:after{content:"→";position:absolute;right:16px;bottom:10px;color:#fff;font-weight:700;opacity:0;transform:translateX(-10px);transition:.35s var(--ease)}
.tiles a:hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:0 26px 40px -18px color-mix(in srgb,var(--cc) 75%,#000)}
.tiles a:hover:before{transform:scale(2.4)}
.tiles a:hover:after{opacity:1;transform:none}
.tiles strong,.tiles a:hover strong{color:#fff;font-size:1.15rem;position:relative}
.tiles span,.tiles a:hover span{color:rgba(255,255,255,.88);position:relative;font-size:.82rem}
/* sections, cards, rows */
.sec-h{border:0;border-bottom:1px solid #e5e9f1;padding:0 0 6px;margin-bottom:22px}
.sec-h h2:before{content:"";display:block;width:46px;height:5px;border-radius:9px;background:linear-gradient(90deg,var(--cc),#ff4d6d);margin-bottom:12px}
.sec-h a{background:#eef1f7;padding:6px 14px;border-radius:999px;text-decoration:none;font-size:.82rem;transition:background .25s,color .25s}
.sec-h a:hover{background:var(--ink2);color:#fff}
.card{border-radius:22px;border:0;background:#fff;box-shadow:0 1px 2px rgba(10,26,51,.06),0 14px 34px -18px rgba(10,26,51,.3);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.card:hover{transform:translateY(-8px);box-shadow:0 2px 4px rgba(10,26,51,.06),0 34px 50px -20px rgba(10,26,51,.4)}
.card-img{overflow:hidden;display:block}
.card-img img,.row-img img{transition:transform .8s var(--ease)}
.card:hover .card-img img,.row:hover .row-img img{transform:scale(1.08)}
.card-b{padding:20px}
.row{border-bottom:0;padding:14px;margin:0 -14px 6px;border-radius:22px;transition:background .3s,transform .4s var(--ease)}
.row:hover{background:#fff;box-shadow:0 20px 40px -24px rgba(10,26,51,.35);transform:translateX(6px)}
.row-img{overflow:hidden;border-radius:16px;display:block}
.row-img img{border-radius:0}
.panel{border:1px solid rgba(10,26,51,.08);border-radius:24px;border-top-width:1px;box-shadow:0 20px 40px -26px rgba(10,26,51,.35)}
.panel-dark{background:linear-gradient(135deg,#0a1a33,#16356b);border:0}
.trend li{transition:transform .25s}.trend li:hover{transform:translateX(5px)}
.trend a{font-weight:600}
/* band */
.band{background:linear-gradient(120deg,#0a1a33,#17408a,#0a1a33,#6d0a1c);background-size:300% 300%;animation:shift 18s ease infinite;border-top:0;padding:64px 0}
.band h2{font-size:clamp(1.8rem,4vw,2.6rem)}
.comp{gap:18px}
.comp li{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:22px;padding:24px;transition:transform .45s var(--ease),background .3s}
.comp li:hover{transform:translateY(-8px);background:rgba(255,255,255,.14)}
.comp .num{background:none;-webkit-text-fill-color:currentColor;color:rgba(255,255,255,.35);font-size:2.8rem}
/* category header */
.cat-h{border:0;border-radius:32px;padding:clamp(40px,7vw,80px) clamp(24px,5vw,56px);position:relative;overflow:hidden;box-shadow:0 36px 60px -30px color-mix(in srgb,var(--c2) 80%,#000)}
.cat-h:before{content:"";position:absolute;right:-80px;top:-80px;width:340px;height:340px;border-radius:50%;background:rgba(255,255,255,.12);animation:kb 14s ease-in-out infinite alternate}
.cat-h:after{content:"";position:absolute;left:30%;bottom:-120px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.07)}
.cat-h h1,.cat-h p{position:relative;z-index:1;animation:rise .8s var(--ease) both}
.cat-h p{animation-delay:.12s}
.cat-h h1{font-size:clamp(2.4rem,6vw,4rem)}
/* article */
.art-h h1{font-weight:800;letter-spacing:-.04em;line-height:1.05;animation:rise .8s var(--ease) both}
.feat img{border-radius:28px;box-shadow:0 40px 70px -34px rgba(10,26,51,.6)}
.prose>p.lead{font:500 1.35rem/1.55 var(--sans);letter-spacing:-.01em;border-left:5px solid var(--cc);border-radius:2px}
.prose h2:before{background:color-mix(in srgb,var(--cc) 14%,#fff);display:inline-block;padding:5px 11px;border-radius:999px;color:color-mix(in srgb,var(--cc) 62%,#000)}
.art-side .toc{border-left:0;padding:0;margin:0 0 20px}
.art-side .toc a{display:block;padding:7px 12px;border-radius:10px;border-left:3px solid transparent;transition:.25s}
.art-side .toc a:hover{background:#eef1f7}
.art-side .toc a.active{border-left-color:var(--cc);background:color-mix(in srgb,var(--cc) 10%,#fff);color:var(--ink2);font-weight:700}
.art-side .share a{border-radius:999px}
/* footer */
.site-footer{background:linear-gradient(160deg,#07152a,#0f2b57);border-top:0}
.site-footer a{text-decoration:none;opacity:.88;transition:opacity .2s,padding-left .25s}
.site-footer li a:hover{opacity:1;padding-left:6px;color:#fff}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.rv{opacity:1!important;transform:none!important}}

/* ===== v1.4 calmer motion, cleaner header, responsive polish ===== */
html,body{overflow-x:clip}
body.admin-bar .site-header{top:32px}
@media(max-width:782px){body.admin-bar .site-header{top:46px}}
/* header: no white box behind links */
.site-header{background:rgba(255,255,255,.94)}
.hdr{min-height:72px}
@media(min-width:900px){
#nav,#nav>ul{background:transparent!important;box-shadow:none}
#nav>ul{gap:4px}
#nav a,.more-btn{font-size:.95rem;color:#1c2b44;padding:10px 16px}
#nav a:hover,.more-btn:hover{background:#eef1f7;color:#0a1a33}
#nav a[aria-current],.more-btn.active{background:#0a1a33;color:#fff}
#more-menu a{display:block;padding:11px 14px;border-radius:12px;color:#1c2b44}
#more-menu a:hover{background:#eef1f7}
#more-menu a[aria-current]{background:#0a1a33;color:#fff}
}
.more-btn span{display:inline-block;transition:transform .25s var(--ease)}
.more-btn[aria-expanded="true"] span{transform:rotate(180deg)}
/* mobile menu */
@media(max-width:899px){
.hdr{min-height:64px}
.logo{font-size:1.25rem}.logo img{width:38px;height:38px}
.nav-toggle{border-radius:12px;padding:12px 11px}
#nav{background:#fff;padding:10px 16px 18px;max-height:calc(100vh - 70px);overflow:auto}
#nav>ul>li{border-bottom:1px solid #eef1f7}
#nav a,.more-btn{padding:15px 10px;font-size:1.05rem;border-radius:0}
#nav a[aria-current],.more-btn.active{box-shadow:none;background:#f1f4fa;color:#c8102e;border-radius:10px}
#more-menu{margin:0 0 10px;padding:4px 0 4px 12px;border-left:3px solid #e1e6ef}
#more-menu a{padding:12px 10px;font-weight:500}
}
/* calmer motion */
.rv{transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.h2-main img{animation:kb 40s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.07)}}
.tk-track{animation-duration:80s}
.tiles a:hover{transform:translateY(-4px);rotate:0deg}
.tiles a:hover:before{transform:scale(1.5)}
.card:hover{transform:translateY(-4px)}
.card:hover .card-img img,.row:hover .row-img img{transform:scale(1.04)}
.row:hover{transform:none;background:#fff}
.h2-side li:hover,.trend li:hover{transform:none}
.comp li:hover{transform:translateY(-4px)}
.btn:hover{transform:translateY(-2px)}
.cat-h:before{animation:none}
.band{animation-duration:30s}
/* links in lists: no stray red underline */
.trend a,.panel a,.h2-side a,.row h3 a,.card h3 a,.comp a,.tiles a,.sec-h a,.share a,.toc a,.chips a{text-decoration:none}
.trend a{background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .4s var(--ease)}
.trend a:hover{background-size:100% 2px;color:#0a1a33}
.trend{padding-left:1.4em}.trend li{margin-bottom:.9em;line-height:1.4}
.trend li::marker{color:#c8102e;font-weight:800}
/* consistent cards */
.grid{align-items:stretch}
.card{height:100%}
.card-img img{aspect-ratio:16/10}
.card-b{padding:18px 20px 20px}
.card h3{font-size:1.15rem;line-height:1.25;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-b>p:not(.kicker):not(.meta){display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:#4a5a73}
.card .meta{margin-top:auto;padding-top:12px;border-top:1px solid #eef1f7}
.row h3{font-size:1.2rem;line-height:1.25}
.row-x{-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
:focus-visible{outline:3px solid #c8102e;outline-offset:3px;border-radius:6px}
/* responsive polish */
@media(max-width:639px){
body{font-size:1rem}
.wrap{padding:0 18px}
.hero2{margin:18px 0 24px}
.h2-main{min-height:400px;border-radius:22px}
.h2-txt{margin-top:150px;padding:20px}
.h2-main h1{font-size:1.85rem}
.h2-ex{font-size:.95rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.h2-side{border-radius:22px;padding:16px 18px}
.tiles{gap:10px}
.tiles a{padding:16px 14px 30px;border-radius:16px}
.tiles strong{font-size:1rem}
.row{grid-template-columns:96px 1fr;gap:12px;padding:12px;margin:0 -12px 4px}
.row-img img{aspect-ratio:1/1}
.row h3{font-size:1.02rem}
.sec-h h2{font-size:1.35rem}
.block{margin:30px 0}
.cat-h{border-radius:22px;padding:34px 22px}
.band{padding:44px 0}
.comp li{padding:20px}
.art-h h1{font-size:1.9rem}
.prose{font-size:1.06rem;line-height:1.7}
.prose>p.lead{font-size:1.15rem}
.feat img{border-radius:18px}
.art-side .toc a{padding:9px 12px}
.panel{border-radius:20px;padding:18px}
.f-grid{gap:22px}
.btn{width:100%;text-align:center}
.nl .btn{width:100%}
}
@media(min-width:640px) and (max-width:959px){
.h2-main{min-height:420px}
.tiles{grid-template-columns:repeat(4,1fr)}
}

/* ===== v1.5 more polish ===== */
@keyframes shimmer{to{background-position:-200% 0}}
.card-img,.row-img,.feat,.hero-img{background:linear-gradient(110deg,#e6ebf3 30%,#f5f7fb 50%,#e6ebf3 70%);background-size:200% 100%;animation:shimmer 1.6s linear infinite}
.card-img img,.row-img img,.feat img{background:#dfe5ee}
img.img-fail{visibility:hidden}
.card-img.img-fail,.row-img.img-fail{background:linear-gradient(135deg,#0a1a33,#16356b);animation:none}
/* image category badge */
.card{position:relative}
.card-img{position:relative}
.card-img:after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(to top,rgba(6,14,30,.45),transparent);pointer-events:none}
.card-b:after{content:"Read guide →";margin-top:14px;font-weight:700;font-size:.85rem;color:var(--cc);opacity:0;transform:translateX(-6px);transition:.3s var(--ease)}
.card{display:flex;flex-direction:column}
.card:hover .card-b:after{opacity:1;transform:none}
.card-b{display:flex;flex-direction:column;flex:1}
/* values strip */
.values{display:grid;gap:18px;margin:56px auto 8px}
.values>div{background:#fff;border:1px solid rgba(10,26,51,.08);border-radius:24px;padding:26px;box-shadow:0 20px 40px -28px rgba(10,26,51,.35)}
.values h2{font-size:1.2rem;margin:.6em 0 .4em}
.values p{margin:0;color:#4a5a73;font-size:.97rem}
.vi{display:inline-block;font:800 .8rem/1 var(--sans);letter-spacing:.12em;color:#c8102e;background:#fde8ec;padding:6px 11px;border-radius:999px}
@media(min-width:800px){.values{grid-template-columns:repeat(3,1fr)}}
/* nicer headings in category pages & pages */
.cat-h h1{letter-spacing:-.04em}
.wrap.narrow>h1{margin-top:.6em}
.pagination .page-numbers{display:inline-block;padding:8px 14px;border-radius:999px;border:1px solid #d5dce8;text-decoration:none;margin-right:6px}
.pagination .current{background:#0a1a33;color:#fff;border-color:#0a1a33}
/* back to top */
.to-top{position:fixed;right:18px;bottom:18px;width:46px;height:46px;border-radius:50%;border:0;background:#0a1a33;color:#fff;font-size:1.2rem;cursor:pointer;box-shadow:0 12px 24px -8px rgba(10,26,51,.6);opacity:0;visibility:hidden;transform:translateY(10px);transition:.3s var(--ease);z-index:90}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:#c8102e}
::selection{background:#c8102e;color:#fff}

/* ===== v1.6 contact form ===== */
.cform-wrap{background:#fff;border:1px solid rgba(10,26,51,.08);border-radius:24px;padding:clamp(20px,4vw,36px);margin:12px 0 36px;box-shadow:0 24px 50px -32px rgba(10,26,51,.4)}
.cform-wrap h2{margin-top:0}
.f-row{margin-bottom:18px}
.f-row label{display:block;font-weight:700;margin-bottom:6px;font-size:.95rem}
.cform input[type=text],.cform input[type=email],.cform select,.cform textarea{width:100%;padding:13px 14px;border:1px solid #b4bfd1;border-radius:12px;font:inherit;background:#fff;color:#1c2b44;transition:border-color .2s,box-shadow .2s}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:0;border-color:#0a1a33;box-shadow:0 0 0 4px rgba(10,26,51,.12)}
.cform textarea{resize:vertical;min-height:150px}
.f-check{display:flex;gap:10px;align-items:flex-start;margin:6px 0 22px;font-size:.92rem}
.f-check input{width:20px;height:20px;margin-top:3px;accent-color:#c8102e;flex:none}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform-msg{padding:14px 16px;border-radius:12px;font-weight:600;margin:0 0 18px}
.cform-msg.ok{background:#e6f6ec;color:#12683a;border:1px solid #9fd8b6}
.cform-msg.bad{background:#fdecee;color:#9b1226;border:1px solid #f1a9b3}

.pagination{margin:24px 0}.pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap}.pagination a,.pagination span{padding:6px 12px;border:1px solid var(--navy);border-radius:6px;text-decoration:none}.pagination .current{background:var(--navy);color:#fff}
body.admin-bar .site-header{top:32px}