/* ISF site.css — shared design system for every page.
   Change a colour or font here once and the whole site follows. */

@font-face{
  font-family:"Archivo";font-style:normal;font-display:swap;
  font-weight:100 900;font-stretch:62% 125%;
  src:url('/proxy?url=https%3A%2F%2Fsoccafederation.com%2Fassets%2Ffonts%2Farchivo-latin-ext-standard-normal.woff2') format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Archivo";font-style:normal;font-display:swap;
  font-weight:100 900;font-stretch:62% 125%;
  src:url('/proxy?url=https%3A%2F%2Fsoccafederation.com%2Fassets%2Ffonts%2Farchivo-latin-standard-normal.woff2') format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --ink:#140E33;          /* darkest purple, header + footer */
  --purple:#2E2080;       /* ISF purple */
  --violet:#2A1A5C;
  --lime:#C5E041;         /* ISF lime */
  --lime-deep:#AACC00;
  --paper:#F5F4FA;        /* light section background */
  --white:#FFFFFF;
  --text:#17122E;
  --muted:#5D5878;
  --line:rgba(23,18,46,.14);
  --line-dark:rgba(255,255,255,.18);
  --wrap:1180px;
  --gap:clamp(20px,4vw,48px);
  --sec:clamp(64px,9vw,120px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:17px;line-height:1.6;font-stretch:100%;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
a{color:inherit}
:focus-visible{outline:3px solid var(--lime-deep);outline-offset:3px;border-radius:2px}

.wrap{width:min(100% - 2*var(--gap),var(--wrap));margin-inline:auto}

/* ---------- type ---------- */
h1,h2,h3{
  margin:0;font-weight:800;font-stretch:68%;text-transform:uppercase;
  line-height:.95;letter-spacing:-.005em;
}
h1{font-size:clamp(46px,8.2vw,112px)}
h2{font-size:clamp(34px,5vw,64px)}
h3{font-size:clamp(22px,2.2vw,28px);line-height:1.05}
p{margin:0 0 1em;max-width:68ch}
.lead{font-size:clamp(18px,1.6vw,21px);line-height:1.55}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:0 26px;border:2px solid transparent;border-radius:4px;
  font-weight:700;font-size:16px;text-decoration:none;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.btn-lime{background:var(--lime);color:var(--ink)}
.btn-lime:hover{background:var(--white)}
.btn-ghost{border-color:var(--line-dark);color:var(--white)}
.btn-ghost:hover{border-color:var(--lime);color:var(--lime)}
.btn-purple{background:var(--purple);color:var(--white)}
.btn-purple:hover{background:var(--ink)}
.textlink{font-weight:700;text-decoration:underline;text-decoration-color:var(--lime-deep);text-decoration-thickness:3px;text-underline-offset:5px}
.textlink:hover{text-decoration-color:currentColor}

/* ---------- header (injected by site.js) ---------- */
.site-header{background:var(--ink);color:var(--white);position:sticky;top:0;z-index:50;min-height:72px}
.site-header .wrap{display:flex;align-items:center;gap:24px;min-height:72px}
.brand{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.brand img{height:36px;width:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(18px,1.9vw,34px);white-space:nowrap}
.nav-item{position:relative;display:flex;align-items:center;min-height:72px}
.nav-top{padding:8px 0;text-decoration:none;font-weight:600;font-size:15px;line-height:1;border-bottom:2px solid transparent}
.nav-top:hover,.nav-item:focus-within>.nav-top{color:var(--lime)}
.nav-top[aria-current="page"]{border-bottom-color:var(--lime)}
.has-sub>.nav-top::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.sub{position:absolute;top:100%;left:-18px;min-width:220px;background:var(--ink);border-top:2px solid var(--lime);padding:8px 0;display:none;box-shadow:0 18px 40px rgba(10,6,30,.45)}
.nav-item:hover>.sub,.nav-item:focus-within>.sub{display:block}
.sub a{display:block;padding:11px 18px;text-decoration:none;font-size:15px;font-weight:500}
.sub a:hover,.sub a:focus-visible{background:rgba(255,255,255,.07);color:var(--lime)}
.nav .btn{min-height:42px;padding:0 20px;color:var(--ink);border:0;font-size:15px}
.nav .btn:hover{color:var(--ink)}
.nav-toggle{display:none;margin-left:auto;background:none;border:2px solid var(--line-dark);border-radius:4px;color:var(--white);font:inherit;font-weight:700;padding:8px 14px;cursor:pointer}
@media (max-width:1140px){
  .nav-toggle{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;max-height:calc(100vh - 72px);overflow-y:auto;background:var(--ink);flex-direction:column;align-items:stretch;gap:0;padding:4px var(--gap) 28px;border-top:1px solid var(--line-dark);white-space:normal}
  .nav.open{display:flex}
  .nav-item{display:block;min-height:auto;flex:0 0 auto;border-bottom:1px solid var(--line-dark);padding:6px 0}
  .nav .btn{flex:0 0 auto}
  .nav-top{display:block;padding:12px 0;font-size:19px;border-bottom:0}
  .nav-top[aria-current="page"]{color:var(--lime)}
  .has-sub>.nav-top::after{display:none}
  .sub{display:block;position:static;border:0;box-shadow:none;padding:0 0 8px;min-width:0;background:none}
  .sub a{padding:9px 0 9px 16px;color:rgba(255,255,255,.78)}
  .nav .btn{margin-top:22px}
}

/* ---------- hero ---------- */
.hero{background:var(--ink);color:var(--white);overflow:hidden;position:relative}
.hero h1 span{display:block}
.hero .lead{margin:28px 0 36px;max-width:46ch;color:rgba(255,255,255,.9)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 50%}
.hero .wrap{position:relative;z-index:2}

/* variant A: photo fills the hero, text sits on a purple fade on the left */
.hero-photo{display:flex;align-items:center;min-height:min(84vh,780px)}
.hero-photo .hero-bg{left:24%;width:76%;object-position:44% 50%}
.hero-photo::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(20,14,51,1) 0%,rgba(20,14,51,1) 24%,rgba(20,14,51,.72) 40%,rgba(20,14,51,.12) 62%,rgba(20,14,51,0) 100%),
             linear-gradient(0deg,rgba(20,14,51,.55) 0%,rgba(20,14,51,0) 30%)}
.hero-photo .wrap{padding-block:clamp(56px,7vw,88px)}
.hero-photo .hero-copy{max-width:540px}
.hero-photo h1{font-size:clamp(44px,6vw,86px)}
@media (max-width:860px){
  .hero-photo{min-height:0;align-items:flex-end}
  .hero-photo .hero-bg{left:0;width:100%;height:62vw;object-position:46% 50%}
  .hero-photo::after{background:linear-gradient(180deg,rgba(20,14,51,0) 0,rgba(20,14,51,.15) 34vw,rgba(20,14,51,1) 60vw,rgba(20,14,51,1) 100%)}
  .hero-photo .wrap{padding-top:50vw}
}

/* variant B: purple text panel left, photo cut in at an angle on the right */
.hero-split{background:var(--purple)}
.hero-split .hero-bg{left:auto;right:0;width:56%;object-position:50% 50%;clip-path:polygon(14% 0,100% 0,100% 100%,0 100%)}
.hero-split .wrap{padding-block:clamp(56px,8vw,110px)}
.hero-split .hero-copy{max-width:46%}
.hero-split h1{font-size:clamp(42px,5.4vw,78px)}
@media (max-width:860px){
  .hero-split .hero-bg{position:relative;width:100%;height:auto;aspect-ratio:16/10;clip-path:polygon(0 0,100% 0,100% 88%,0 100%)}
  .hero-split .hero-copy{max-width:none}
  .hero-split .wrap{padding-top:28px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* page hero for inner pages */
.page-hero{background:var(--purple);color:var(--white)}
.page-hero .wrap{padding-block:clamp(48px,7vw,96px)}
.page-hero h1{font-size:clamp(40px,6.4vw,88px);max-width:14ch}
.page-hero .lead{margin-top:24px;max-width:56ch;color:rgba(255,255,255,.86)}
.crumbs{font-size:14px;margin-bottom:22px;color:rgba(255,255,255,.7)}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--lime)}

/* ---------- sections ---------- */
.sec{padding-block:var(--sec)}
.sec-white{background:var(--white)}
.sec-dark{background:var(--ink);color:var(--white)}
.sec-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px 32px;margin-bottom:clamp(28px,4vw,52px)}
.sec-head p{margin:0;color:var(--muted)}
.sec-dark .sec-head p{color:rgba(255,255,255,.7)}

/* competitions */
.comp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap)}
.comp-next{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:clamp(24px,3vw,40px)}
.comp-next h3{margin-bottom:14px}
.comp-next p{color:var(--muted)}
.comp-feature{background:var(--ink);color:var(--white);border-radius:6px;padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;justify-content:space-between;gap:28px;text-decoration:none;min-height:260px}
.comp-feature:hover h3{color:var(--lime)}
.comp-feature small{font-size:14px;color:rgba(255,255,255,.7)}
.comp-feature h3{font-size:clamp(30px,3.4vw,46px);line-height:.95}
.comp-feature .more{font-weight:700;color:var(--lime)}
@media (max-width:760px){.comp-grid{grid-template-columns:1fr}}

/* touchline timeline (World Cup hosts — a real sequence) */
.touchline{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--n,6),minmax(0,1fr));border-top:3px solid var(--purple);position:relative}
.touchline li{padding:18px 12px 0 0;position:relative}
.touchline li::before{content:"";position:absolute;top:-9px;left:0;width:15px;height:15px;border-radius:50%;background:var(--paper);border:3px solid var(--purple)}
.touchline li.now::before{background:var(--lime);border-color:var(--purple)}
.touchline .yr{display:block;font-weight:800;font-stretch:68%;font-size:clamp(26px,2.6vw,36px);line-height:1}
.touchline .host{display:block;font-weight:600;margin-top:4px}
.touchline .note{display:block;font-size:14px;color:var(--muted)}
.sec-white .touchline li::before{background:var(--white)}
@media (max-width:760px){
  .touchline{grid-template-columns:1fr;border-top:0;border-left:3px solid var(--purple);margin-left:6px}
  .touchline li{padding:0 0 22px 24px}
  .touchline li::before{top:4px;left:-9px}
}

/* news */
.news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.news-card{display:flex;flex-direction:column;text-decoration:none;border-top:3px solid var(--purple);padding-top:16px}
.news-card .thumb{aspect-ratio:16/10;background:linear-gradient(135deg,var(--purple),var(--violet));border-radius:4px;margin-bottom:16px;overflow:hidden}
.news-card .thumb img{width:100%;height:100%;object-fit:cover}
.news-card time{font-size:14px;color:var(--muted)}
.news-card h3{margin:6px 0 8px;text-transform:none;font-stretch:88%;font-weight:700;line-height:1.2}
.news-card:hover h3{color:var(--purple)}
.news-card p{color:var(--muted);font-size:16px;margin:0}
@media (max-width:860px){.news-grid{grid-template-columns:1fr}}

/* who we are */
.qa{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.qa article{border-top:1px solid var(--line-dark);padding-top:22px}
.qa h3{color:var(--lime);margin-bottom:14px}
.qa p{color:rgba(255,255,255,.84);margin:0}
.qa-light article{border-top-color:var(--line)}
.qa-light h3{color:var(--purple)}
.qa-light p{color:var(--muted)}
.qa-light p+p{margin-top:14px;color:var(--text)}
@media (max-width:860px){.qa{grid-template-columns:1fr}}

/* partners */
.partners{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(28px,5vw,72px)}
.partners a,.partners span{display:flex;align-items:center;min-height:64px;font-weight:700;color:var(--muted);text-decoration:none}
.partners img{max-height:64px;max-width:180px;width:auto;object-fit:contain}

/* ambassadors */
.names{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 28px}
.names li{font-weight:800;font-stretch:68%;text-transform:uppercase;font-size:clamp(26px,3.6vw,48px);line-height:1.1}
.names li:nth-child(even){color:var(--purple)}

/* split (image + text) */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap);align-items:center}
.split .media{border-radius:6px;overflow:hidden;background:linear-gradient(135deg,var(--purple),var(--violet));aspect-ratio:5/4}
.split .media img{width:100%;height:100%;object-fit:cover}
.split h2{margin-bottom:22px}
.split .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
@media (max-width:860px){.split{grid-template-columns:1fr}}

/* formats row (about) */
.formats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.formats div{background:var(--white);padding:26px 22px}
.formats b{display:block;font-weight:800;font-stretch:68%;font-size:clamp(40px,5vw,64px);line-height:1;color:var(--purple)}
.formats span{color:var(--muted);font-size:15px}
@media (max-width:760px){.formats{grid-template-columns:repeat(2,minmax(0,1fr))}}

.prose{max-width:68ch}
.prose h2{margin:0 0 24px}
.prose h3{margin:36px 0 12px}

/* join band */
.join{background:var(--lime);color:var(--ink)}
.join .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding-block:clamp(40px,6vw,72px)}
.join h2{max-width:18ch}

/* ---------- footer (injected by site.js) ---------- */
.site-footer{background:var(--ink);color:rgba(255,255,255,.8);font-size:15px}
.site-footer .wrap{padding-block:56px 32px}
.foot-top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:var(--gap);padding-bottom:40px;border-bottom:1px solid var(--line-dark)}
.foot-top img{height:40px;width:auto;margin-bottom:18px}
.foot-top h4{margin:0 0 12px;color:var(--white);font-size:15px;font-weight:700}
.foot-top ul{list-style:none;margin:0;padding:0}
.foot-top li{margin-bottom:8px}
.foot-top a{text-decoration:none}
.foot-top a:hover{color:var(--lime)}
.foot-top address{font-style:normal;line-height:1.7}
.foot-partners{display:flex;flex-wrap:wrap;align-items:center;gap:18px 40px;padding:32px 0;border-bottom:1px solid var(--line-dark)}
.foot-partners h4{margin:0;color:var(--white);font-size:15px;font-weight:700}
.foot-partners ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:22px clamp(28px,4vw,56px)}
.foot-partners a{display:block;opacity:.85;transition:opacity .15s;text-decoration:none}
.foot-partners a:hover{opacity:1}
.foot-partners img{display:block;height:30px;width:auto}
.foot-partners .img-fallback{color:var(--white);font-size:22px}
.foot-top .hashtag{margin:14px 0 0;font-weight:800;font-stretch:68%;font-size:22px;color:var(--lime)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:24px;font-size:14px}
.foot-bottom a{margin-left:18px}
@media (max-width:860px){.foot-top{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-top{grid-template-columns:1fr}.foot-bottom a{margin:0 18px 0 0}}

/* image fallback label (set by site.js when an image fails) */
.img-fallback{font-weight:800;font-stretch:68%;text-transform:uppercase;letter-spacing:.01em}

/* ================= components added with the master brief ================= */
.hero .sub-head{margin:6px 0 0;font-weight:700;font-stretch:80%;font-size:clamp(24px,2.6vw,38px);color:var(--lime);max-width:40ch;line-height:1.15;text-transform:uppercase;letter-spacing:-.01em}
.hero .sub-head+.lead{margin-top:22px}
.hero-more{display:inline-block;margin-top:22px;color:var(--white)}

/* statistics: one reusable block */
.stats{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:1px;background:rgba(20,14,51,.18)}
.stats div{background:var(--lime);padding:clamp(22px,3vw,40px) clamp(14px,2vw,28px)}
.stats b{display:block;font-weight:800;font-stretch:68%;font-size:clamp(38px,5.2vw,76px);line-height:.95;color:var(--purple)}
.stats span{display:block;margin-top:8px;font-weight:700;font-size:15px;color:var(--ink)}
.stats-band{background:var(--lime)}
.stats-band .wrap{padding-block:0}
.stats-dark{background:rgba(255,255,255,.14)}
.stats-dark div{background:var(--ink)}
.stats-dark b{color:var(--lime)}
.stats-dark span{color:rgba(255,255,255,.86)}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stats div:last-child:nth-child(odd){grid-column:1/-1}}

/* the game */
.game{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap);align-items:start}
.game h2 span{display:block;color:var(--purple)}
.formats-line{font-weight:800;font-stretch:68%;font-size:clamp(26px,3vw,40px);color:var(--purple);margin:0 0 6px}
.traits{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.traits li{background:var(--purple);color:var(--white);font-weight:700;font-size:15px;padding:9px 16px;border-radius:4px}
@media (max-width:860px){.game{grid-template-columns:1fr}}

/* pathway: a real sequence, so it is drawn as one */
.pathway{list-style:none;margin:0 0 clamp(28px,4vw,44px);padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
.pathway li{position:relative;background:var(--lime);color:var(--ink);font-weight:800;font-stretch:68%;text-transform:uppercase;font-size:clamp(17px,2vw,26px);text-align:center;padding:16px 8px;margin-right:22px;border-radius:4px}
.pathway li:last-child{margin-right:0}
.pathway li:not(:last-child)::after{content:"";position:absolute;right:-22px;top:50%;width:22px;height:2px;background:var(--line-dark)}
.pathway-copy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.pathway-copy p{margin:0;font-size:clamp(18px,1.7vw,22px);font-weight:600;line-height:1.35;border-top:1px solid var(--line-dark);padding-top:18px}
.claim{margin:clamp(28px,4vw,44px) 0 0;font-weight:800;font-stretch:68%;text-transform:uppercase;font-size:clamp(26px,3.2vw,44px);line-height:1;color:var(--lime)}
@media (max-width:760px){
  .pathway{grid-template-columns:1fr;gap:18px}
  .pathway li{margin-right:0}
  .pathway li:not(:last-child)::after{right:auto;left:50%;top:100%;width:2px;height:18px}
  .pathway-copy{grid-template-columns:1fr;gap:0}
  .pathway-copy p{padding:16px 0}
}

/* competition ecosystem */
.eco{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.eco-col{border-top:4px solid var(--purple);padding-top:18px;scroll-margin-top:100px}
.eco-col h3{color:var(--purple);margin-bottom:14px}
.eco-col ul{list-style:none;margin:0;padding:0}
.eco-col li{padding:11px 0;border-bottom:1px solid var(--line);font-weight:600}
.eco-col li a{text-decoration:none;display:flex;justify-content:space-between;gap:12px}
.eco-col li a::after{content:"";flex:none;width:8px;height:8px;margin-top:8px;border-right:2px solid var(--lime-deep);border-top:2px solid var(--lime-deep);transform:rotate(45deg)}
.eco-col li a:hover{color:var(--purple)}
.eco-col li small{display:block;font-weight:400;color:var(--muted);font-size:14.5px;margin-top:2px}
@media (max-width:980px){.eco{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.eco{grid-template-columns:1fr}}

/* ranking */
.flag{display:inline-block;flex:none;width:28px;height:28px;border-radius:50%;background:url('/proxy?url=https%3A%2F%2Fsoccafederation.com%2Fassets%2Fimg%2Fflags.webp') no-repeat;background-size:280px auto;box-shadow:inset 0 0 0 1px rgba(20,14,51,.18)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:6px;background:var(--white)}
.ranking{width:100%;border-collapse:collapse;font-size:16px}
.ranking th,.ranking td{padding:11px 16px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.ranking tbody tr:last-child th,.ranking tbody tr:last-child td{border-bottom:0}
.ranking thead th{background:var(--ink);color:var(--white);font-size:13.5px;font-weight:700;position:sticky;top:0;padding:0}
.ranking thead button{all:unset;display:block;box-sizing:border-box;width:100%;padding:13px 16px;cursor:pointer;font:inherit}
.ranking thead button:hover{color:var(--lime)}
.ranking thead button:focus-visible{outline:3px solid var(--lime);outline-offset:-3px}
.ranking th[aria-sort="ascending"] button::after{content:" \2191"}
.ranking th[aria-sort="descending"] button::after{content:" \2193"}
.ranking .c-rank{width:72px;font-weight:800;font-stretch:68%;font-size:21px;color:var(--purple)}
.ranking thead .c-rank{font-size:13.5px;font-stretch:100%;color:var(--white)}
.ranking .c-country{font-weight:600}
.ranking .cwrap{display:flex;align-items:center;gap:12px}
.ranking .c-num{text-align:right;font-variant-numeric:tabular-nums}
.ranking thead .c-num button{text-align:right}
.ranking .c-total{font-weight:700}
.ranking tr.top3 td,.ranking tr.top3 th{background:rgba(197,224,65,.22)}
.ranking tr.top3 .c-rank{color:var(--ink)}
.ranking tbody tr:hover td,.ranking tbody tr:hover th{background:rgba(46,32,128,.06)}
.ranking-preview .ranking thead button{cursor:default}
.ranking-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-bottom:18px}
.ranking-tools label{font-weight:700;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ranking-tools input{font:inherit;padding:12px 14px;border:2px solid var(--line);border-radius:4px;min-width:min(320px,70vw);background:var(--white);color:var(--text)}
.ranking-tools input:focus{border-color:var(--purple);outline:none}
.ranking-meta{color:var(--muted);font-size:15px}
.ranking-empty{padding:28px;background:var(--white);border:1px solid var(--line);border-radius:6px;margin:0}
.rank-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--gap);align-items:start}
.rank-split h2{margin-bottom:20px}
.rank-split .actions{margin-top:24px}
@media (max-width:860px){.rank-split{grid-template-columns:1fr}}

/* world cup history cards */
.editions{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
.editions li{background:var(--white);border-radius:6px;overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column}
.editions img{width:100%;aspect-ratio:4/3;object-fit:cover}
.editions .body{padding:16px 18px 20px}
.editions .yr{font-weight:800;font-stretch:68%;font-size:34px;line-height:1;color:var(--purple)}
.editions .host{display:block;font-weight:700;margin-top:6px}
.editions .champ{display:block;color:var(--muted);font-size:15px;margin-top:2px}
.editions .latest{background:var(--lime);justify-content:flex-end;min-height:220px;border-color:var(--lime)}
.editions .latest .yr,.editions .latest .champ{color:var(--ink)}
.editions .latest a{font-weight:700}
.sec-dark .editions li{border-color:transparent}
@media (max-width:1000px){.editions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.editions{grid-template-columns:1fr}}

/* photo band with text */
.photo-band{position:relative;color:var(--white);background:var(--ink);overflow:hidden}
.photo-band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo-band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,14,51,.95) 0%,rgba(20,14,51,.8) 45%,rgba(20,14,51,.35) 100%)}
.photo-band .wrap{position:relative;z-index:2;padding-block:var(--sec)}
.photo-band h2{max-width:16ch;margin-bottom:22px}
.photo-band .lead{max-width:52ch}
.checks{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px;max-width:52ch}
.checks li{padding-left:26px;position:relative;font-weight:600}
.checks li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:12px;border-radius:50%;background:var(--lime)}

/* hybrid model table */
.hybrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.hybrid div{padding:24px;border-radius:6px;border:1px solid var(--line);background:var(--white)}
.hybrid h3{margin-bottom:14px;color:var(--muted)}
.hybrid ul{list-style:none;margin:0;padding:0}
.hybrid li{padding:9px 0;border-top:1px solid var(--line)}
.hybrid .isf{background:var(--purple);border-color:var(--purple);color:var(--white)}
.hybrid .isf h3{color:var(--lime)}
.hybrid .isf li{border-top-color:var(--line-dark);font-weight:700}
@media (max-width:760px){.hybrid{grid-template-columns:1fr}}

/* people / icons as text cards */
.icons{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.icons li{border-top:4px solid var(--lime-deep);padding-top:14px;font-weight:800;font-stretch:68%;text-transform:uppercase;font-size:clamp(22px,2.3vw,30px);line-height:1.05}
@media (max-width:860px){.icons{grid-template-columns:repeat(2,minmax(0,1fr))}}

.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap)}
@media (max-width:860px){.two-col{grid-template-columns:1fr}}
.note{color:var(--muted);font-size:15px}
section[id],div[id]{scroll-margin-top:96px}

/* ranking: full table */
.ranking .nil{color:#B5B1C6}
.ranking thead .c-num button{white-space:normal;line-height:1.25;min-width:86px;padding:10px 12px}
.ranking td.c-num{padding-inline:12px}
#ranking-table .ranking .c-rank{position:sticky;left:0;z-index:2;width:60px;min-width:60px;padding-inline:14px 6px}
#ranking-table .ranking .c-country{position:sticky;left:60px;z-index:2;min-width:190px;box-shadow:1px 0 0 var(--line)}
#ranking-table .ranking tbody .c-rank,#ranking-table .ranking tbody .c-country{background:var(--white)}
#ranking-table .ranking tbody tr.top3 .c-rank,#ranking-table .ranking tbody tr.top3 .c-country{background:#F1F7D3}
#ranking-table .ranking thead .c-rank,#ranking-table .ranking thead .c-country{z-index:3;background:var(--ink)}
@media (max-width:600px){
  .ranking th,.ranking td{padding:10px 10px}
  #ranking-table .ranking .c-rank{width:56px;min-width:56px;padding-inline:10px 4px;font-size:18px}
  #ranking-table .ranking thead .c-rank button{padding:10px 4px 10px 10px;font-size:12.5px}
  #ranking-table .ranking .c-country{left:56px;min-width:150px}
  .ranking .cwrap{gap:8px}
}

/* official rules */
.rules-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.toc{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow-y:auto;font-size:15px;border-left:3px solid var(--purple);padding-left:18px}
.toc h2{font-size:20px;margin-bottom:12px}
.toc ol{list-style:none;margin:0;padding:0}
.toc li{margin:0}
.toc a{display:block;padding:6px 0;text-decoration:none;color:var(--muted);line-height:1.3}
.toc a:hover,.toc a:focus-visible{color:var(--purple)}
.toc .sep{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.rules-body section{margin-bottom:clamp(40px,5vw,64px)}
.rules-body h2{font-size:clamp(26px,3vw,38px);margin-bottom:22px;padding-bottom:12px;border-bottom:3px solid var(--lime-deep)}
.rules-body h3{margin:28px 0 12px}
.rule{display:grid;grid-template-columns:64px minmax(0,1fr);gap:0 8px;padding:14px 0;border-bottom:1px solid var(--line);scroll-margin-top:96px}
.rule-n{font-weight:800;font-stretch:68%;font-size:21px;color:var(--purple);line-height:1.35}
.rule-n a{text-decoration:none}
.rule p{margin:0 0 .7em;max-width:76ch}
.rule p:last-child{margin-bottom:0}
.rule ol.sub{list-style:none;margin:.2em 0 .8em;padding:0;max-width:76ch}
.rule ol.sub li{display:grid;grid-template-columns:40px minmax(0,1fr);padding:3px 0}
.rule ol.sub li.deep{margin-left:40px}
.rule ol.sub li>span:first-child{color:var(--muted);font-variant-numeric:tabular-nums}
.rule figure,.rules-body figure{margin:16px 0 4px;max-width:760px}
.rules-body figure img{border-radius:6px;width:100%}
.rules-body figcaption{font-size:14.5px;color:var(--muted);margin-top:8px}
.cards-table{width:100%;border-collapse:collapse;font-size:16px;min-width:720px}
.cards-table th,.cards-table td{text-align:left;vertical-align:top;padding:14px 16px;border-bottom:1px solid var(--line)}
.cards-table thead th{background:var(--ink);color:var(--white);font-size:14px}
.cards-table ul{margin:0;padding-left:18px}
.cards-table .card{display:inline-block;font-weight:800;padding:10px 12px;border-radius:4px;min-width:74px;text-align:center}
.card-y{background:#FFE600;color:var(--ink)}
.card-r{background:#D81E1E;color:var(--white)}
.rules-download{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:28px}
.rules-download span{color:rgba(255,255,255,.75);font-size:15px}
@media (max-width:900px){
  .rules-layout{grid-template-columns:minmax(0,1fr)}
  .toc{position:static;max-height:none;border-left:0;padding:18px;background:var(--white);border:1px solid var(--line);border-radius:6px}
  .toc ol{columns:2;column-gap:24px}
  .rule{grid-template-columns:52px minmax(0,1fr)}
}
@media (max-width:520px){.toc ol{columns:1}}

/* membership */
.price{display:flex;align-items:baseline;gap:10px;font-weight:800;font-stretch:68%;color:var(--purple);line-height:.9}
.price b{font-size:clamp(64px,9vw,120px)}
.price span{font-size:clamp(24px,3vw,36px)}
.facts{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:0}
.facts li{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-top:1px solid var(--line)}
.facts li span:last-child{font-weight:700;text-align:right}
.pc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,2.4vw,32px)}
.pc>div{border-radius:6px;padding:clamp(22px,3vw,36px)}
.pc .priv{background:var(--purple);color:var(--white)}
.pc .comm{background:var(--white);border:1px solid var(--line)}
.pc h3{margin-bottom:16px}
.pc .priv h3{color:var(--lime)}
.pc ul{list-style:none;margin:0;padding:0}
.pc li{padding:12px 0;border-top:1px solid var(--line)}
.pc .priv li{border-top-color:var(--line-dark)}
.pc li small{display:block;font-size:15px;opacity:.8;margin-top:2px}
@media (max-width:760px){.pc{grid-template-columns:1fr}}
.quote{font-weight:800;font-stretch:68%;text-transform:uppercase;font-size:clamp(28px,4vw,52px);line-height:1;max-width:20ch;margin:0}
.faq{max-width:820px}
.faq details{border-top:1px solid var(--line);padding:4px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:16px 36px 16px 0;font-weight:700;font-size:19px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;font-size:26px;font-weight:400;color:var(--purple)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:0 0 18px;color:var(--text)}

/* contact */
.routes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,28px)}
.route{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:10px}
.route h2{font-size:clamp(24px,2.6vw,32px)}
.route p{margin:0;color:var(--muted)}
.route .btn{align-self:flex-start;margin-top:12px}
@media (max-width:760px){.routes{grid-template-columns:1fr}}
.mail-big{font-weight:800;font-stretch:68%;font-size:clamp(26px,4vw,48px);text-decoration:none;color:var(--lime);word-break:break-word}
.mail-big:hover{color:var(--white)}

/* legal pages */
.legal{max-width:calc(74ch + 2*var(--gap))}
.legal h2{font-size:clamp(24px,2.6vw,32px);margin:44px 0 14px}
.legal h2:first-child{margin-top:0}
.legal h3{margin:26px 0 10px;font-size:20px}
.legal p,.legal li{max-width:74ch}
.legal ul{margin:0 0 1em;padding-left:22px}
.legal li{margin-bottom:6px}

/* news */
.news-meta,.article-meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:14px;color:var(--muted)}
.news-cat{font-weight:700;color:var(--purple)}
.article-meta{color:rgba(255,255,255,.75);margin:0 0 18px;font-size:15px}
.article-meta .news-cat{color:var(--lime)}
.article-title{font-size:clamp(30px,4vw,54px);max-width:26ch;line-height:1}
.news-card .thumb.thumb-empty{background:url('/proxy?url=https%3A%2F%2Fsoccafederation.com%2Fassets%2Fimg%2Fsocca-logo-white.svg') center/44% no-repeat,linear-gradient(135deg,var(--purple),var(--violet))}
.news-list{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:clamp(36px,5vw,56px)}
@media (max-width:860px){.news-list{grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(24px,4vw,40px)}
.chip{font:inherit;font-weight:700;font-size:15px;padding:9px 16px;border-radius:4px;border:2px solid var(--line);background:var(--white);color:var(--text);cursor:pointer}
.chip:hover{border-color:var(--purple)}
.chip.on{background:var(--purple);border-color:var(--purple);color:var(--white)}
.article-body{max-width:calc(820px + 2*var(--gap))}
.article-hero{margin:0 0 clamp(28px,4vw,44px)}
.article-hero img{width:100%;border-radius:6px}
.article-figure{margin:clamp(28px,4vw,40px) 0}
.article-figure img{width:100%;border-radius:6px;display:block}
.article-body .prose{font-size:clamp(17px,1.4vw,19px);line-height:1.7}
.article-body .prose h2{font-size:clamp(24px,2.6vw,32px);margin:40px 0 14px}

/* admin */
.admin{max-width:calc(860px + 2*var(--gap))}
.admin h1{font-size:clamp(30px,4vw,44px);margin-bottom:8px}
.admin-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:26px}
.admin-bar .note{margin:0}
.admin-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;width:100%;text-align:left;font:inherit;background:var(--white);border:1px solid var(--line);border-radius:6px;padding:16px 18px;margin-bottom:10px;cursor:pointer}
.admin-row:hover{border-color:var(--purple)}
.admin-title{font-weight:700;font-size:18px}
.admin-sub{grid-column:2;color:var(--muted);font-size:14.5px}
.pill{grid-row:1/3;align-self:center;font-size:12.5px;font-weight:700;padding:5px 10px;border-radius:99px;white-space:nowrap}
.pill.pub{background:var(--lime);color:var(--ink)}
.pill.draft{background:#E6E4F0;color:var(--muted)}
.field{margin-bottom:20px}
.field label{display:block;font-weight:700;margin-bottom:6px}
.field .hint{display:block;font-weight:400;color:var(--muted);font-size:14.5px;margin-top:2px}
.field input[type=text],.field input[type=email],.field input[type=tel],.field input[type=password],.field input[type=datetime-local],.field input[type=search],.field select,.field textarea{width:100%;font:inherit;padding:12px 14px;border:2px solid var(--line);border-radius:4px;background:var(--white);color:var(--text)}
.field textarea{min-height:120px;resize:vertical;line-height:1.55}
.field textarea.tall{min-height:340px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--purple)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field-row>.field{display:flex;flex-direction:column}.field-row>.field>label{flex:1}
@media (max-width:600px){.field-row{grid-template-columns:1fr}}
#img-preview{max-width:100%;max-height:320px;border-radius:6px;margin-top:12px}
.admin-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding-top:20px;border-top:1px solid var(--line);margin-top:8px}
.btn-line{background:none;border-color:var(--line);color:var(--text)}
.btn-line:hover{border-color:var(--purple)}
.btn-danger{background:none;border-color:transparent;color:#B3261E;margin-left:auto}
.btn-danger:hover{border-color:#B3261E}
.btn:disabled{opacity:.55;cursor:default}
.flash{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--white);padding:14px 20px;border-radius:6px;font-weight:600;z-index:80;max-width:min(92vw,560px);box-shadow:0 12px 32px rgba(10,6,30,.35)}
.flash.bad{background:#B3261E}
.login-card{max-width:440px;background:var(--white);border:1px solid var(--line);border-radius:6px;padding:clamp(22px,4vw,36px)}
.conn{max-width:640px;margin:0 0 22px;padding:14px 16px;border-radius:6px;font-weight:600;line-height:1.45}
.conn.ok{background:#EEF6CC;color:#33400A}
.conn.bad{background:#FBE9E7;color:#8C1D18}

/* World Cup hero: the champions photo. Faces and trophy stay clear, the text sits low on the left. */
.hero-wc{min-height:clamp(520px,78vh,700px);align-items:flex-end}
.hero-wc .hero-bg{left:0;width:100%;object-position:50% 27%}
.hero-wc::after{background:linear-gradient(90deg,rgba(20,14,51,.9) 0%,rgba(20,14,51,.62) 26%,rgba(20,14,51,.1) 50%,rgba(20,14,51,0) 100%),
  linear-gradient(0deg,rgba(20,14,51,.85) 0%,rgba(20,14,51,.25) 34%,rgba(20,14,51,0) 55%)}
.hero-wc .wrap{padding-block:clamp(36px,5vw,64px)}
.hero-wc .hero-copy{max-width:460px}
.hero-wc h1{font-size:clamp(44px,5.4vw,80px)}
@media (max-width:860px){
  .hero-wc{min-height:0}
  .hero-wc .hero-bg{height:66vw;object-position:47% 40%}
  .hero-wc::after{background:linear-gradient(180deg,rgba(20,14,51,0) 0,rgba(20,14,51,.1) 40vw,rgba(20,14,51,1) 64vw,rgba(20,14,51,1) 100%)}
  .hero-wc .wrap{padding-top:58vw}
}

/* member payments */
.due{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:clamp(20px,3vw,32px);margin-bottom:18px}
.due header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px}
.due h2{font-size:clamp(24px,2.8vw,34px)}
.due header .note{margin:4px 0 0}
.due-price{font-weight:800;font-stretch:68%;font-size:clamp(40px,6vw,64px);line-height:1;color:var(--purple);margin:22px 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.due-price .was{font-size:.5em;color:var(--muted);text-decoration:line-through;font-weight:600}
.due-price .pill{font-stretch:100%;font-size:13px}
.due-actions .btn{min-height:56px;font-size:17px}
.due-thanks{font-weight:600;margin:0}
.bank{margin-top:20px;border-top:1px solid var(--line);padding-top:6px}
.bank summary{cursor:pointer;font-weight:700;padding:12px 0}
.bank dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 22px;margin:6px 0 14px}
.bank dt{color:var(--muted)}
.bank dd{margin:0;font-weight:600;word-break:break-word}
.discount{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.discount label{font-weight:700;display:grid;gap:6px;flex:1 1 220px}
.discount input{font:inherit;padding:11px 14px;border:2px solid var(--line);border-radius:4px;text-transform:uppercase}
.discount input:focus{outline:none;border-color:var(--purple)}
.discount .btn{min-height:46px}

/* memberships backend */
.admin-wide{max-width:calc(1100px + 2*var(--gap))}
.m-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.m-summary div{background:var(--white);padding:18px 16px}
.m-summary b{display:block;font-weight:800;font-stretch:68%;font-size:clamp(24px,3vw,36px);line-height:1;color:var(--purple)}
.m-summary span{font-size:14px;color:var(--muted)}
@media (max-width:760px){.m-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.m-summary div:last-child{grid-column:1/-1}}
.m-table thead th{padding:13px 16px;position:static}
.m-table tbody tr[data-id]{cursor:pointer}
.m-table .num{text-align:right;font-variant-numeric:tabular-nums}
.m-table small{color:var(--muted)}
.m-table td,.m-table tbody th{white-space:normal}
@media (max-width:760px){.hide-s{display:none}}
.m-info{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 24px;margin:0 0 8px}
.m-info dt{color:var(--muted)}
.m-info dd{margin:0;font-weight:600;word-break:break-word}
.m-h{font-size:clamp(22px,2.4vw,28px);margin:40px 0 14px}
.dc-form{display:grid;grid-template-columns:1.4fr .8fr .8fr 1.6fr auto;gap:12px;align-items:end}
.dc-form .field{margin:0}
.dc-form .btn{min-height:50px}
@media (max-width:900px){.dc-form{grid-template-columns:1fr 1fr}.dc-form .btn{grid-column:1/-1}}
.btn-s{min-height:34px;padding:0 12px;font-size:14px}

/* ribbon (above header) */
.ribbon{display:block;background:#70CBF4;color:var(--ink);text-decoration:none;font-size:15px;font-weight:600;text-align:center;padding:10px var(--gap);line-height:1.35}
.ribbon:hover{background:#8ad6f7}
.ribbon strong{text-transform:uppercase;letter-spacing:.04em;font-stretch:80%;margin-right:4px}
.ribbon-arrow{margin-left:6px;font-weight:700}
.sub-soon{display:block;padding:11px 18px;font-size:15px;color:rgba(255,255,255,.5);cursor:default}
.sub-soon small{font-size:12px;text-transform:uppercase;letter-spacing:.04em;margin-left:4px}
/* partner banner */
.banner-band{background:var(--white);border-bottom:1px solid var(--line)}
.banner-band .wrap{display:flex;flex-direction:column;align-items:center;gap:8px;padding-block:22px}
.banner-band a{display:block;max-width:720px;width:100%}
.banner-band img{width:100%;height:auto;border-radius:4px}
.banner-wide a{max-width:1080px}
.banner-wide img{display:block}
.banner-band small{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
/* members list */
.members{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.members li{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:14px 18px;display:flex;align-items:center;gap:14px}
.flag-m{background-image:url('/proxy?url=https%3A%2F%2Fsoccafederation.com%2Fassets%2Fimg%2Fflags-members.webp')}
.members b{font-weight:800;font-stretch:68%;text-transform:uppercase;font-size:22px;line-height:1.05}
.members-cont small{font-size:15px;color:var(--muted);font-weight:400}
.members span{display:block;color:var(--muted);font-size:15px;margin-top:4px}
.members a{text-decoration:none}
.members a:hover b{color:var(--purple)}
.members-cont{margin:clamp(32px,4vw,48px) 0 14px;padding-bottom:10px;border-bottom:3px solid var(--purple);font-size:clamp(24px,2.6vw,32px)}
.members-cont:first-child{margin-top:0}
@media (max-width:1000px){.members{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.members{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.members{grid-template-columns:1fr}}
/* calendar */
.cal{list-style:none;margin:0;padding:0;max-width:820px}
.cal li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 24px;padding:18px 0;border-top:1px solid var(--line)}
.cal li:last-child{border-bottom:1px solid var(--line)}
.cal .d{font-weight:800;font-stretch:68%;color:var(--purple);font-size:20px;line-height:1.2}
.cal .t{font-weight:700;font-size:18px}
.cal .p{color:var(--muted);margin:2px 0 0}
@media (max-width:560px){.cal li{grid-template-columns:1fr}}
.dl{display:flex;flex-wrap:wrap;gap:10px}

/* video review */
.rv-steps{grid-template-columns:repeat(5,minmax(0,1fr))}
.rv-steps li{background:var(--purple);color:var(--white)}
.rv-steps li:not(:last-child)::after{background:var(--line)}
.rv-copy p{border-top-color:var(--line);font-weight:500;color:var(--muted);font-size:17px}
.rv-wrap{max-width:calc(820px + 2*var(--gap))}
.rv-h{display:flex;align-items:center;gap:14px;font-size:clamp(22px,2.4vw,30px);margin:clamp(32px,4vw,48px) 0 18px;padding-bottom:10px;border-bottom:2px solid var(--line)}
.rv-h:first-child{margin-top:0}
.rv-h span{flex:none;width:36px;height:36px;border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center;font-size:18px;font-stretch:100%}
.rv-drop{position:relative;border:2px dashed var(--line);border-radius:6px;background:var(--white);padding:clamp(22px,4vw,36px);text-align:center;transition:border-color .15s}
.rv-drop.over,.rv-drop:focus-within{border-color:var(--purple)}
.rv-drop.has-file{border-style:solid;border-color:var(--lime-deep)}
.rv-drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.rv-drop label{display:block;font-size:17px;line-height:1.5;pointer-events:none}
.rv-drop label strong{color:var(--purple)}
.rv-drop .hint{color:var(--muted);font-size:14.5px}
.rv-file{margin:14px 0 0;font-weight:700;color:var(--ink)}
.rv-consent{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.5;margin-bottom:18px}
.rv-consent input{margin-top:5px;width:18px;height:18px;flex:none}
.rv-progress{position:relative;height:28px;background:var(--white);border:1px solid var(--line);border-radius:4px;overflow:hidden;margin-bottom:16px}
.rv-bar{position:absolute;inset:0 auto 0 0;width:0;background:var(--lime);transition:width .2s}
.rv-progress span{position:relative;display:block;text-align:center;line-height:26px;font-weight:700;font-size:14px}
.rv-h em,.field label em{font-style:normal}
.rv-type-note{margin:-6px 0 8px;padding:12px 16px;border-left:4px solid var(--lime);background:var(--white);font-size:15.5px;line-height:1.5}
.rv-type-note.protest{border-left-color:var(--purple)}
.rv-deadline{margin:0 0 8px;padding:10px 14px;border-radius:4px;background:#EEF6D2;font-size:15px;font-weight:600}
.rv-deadline.bad{background:#FBE3E3;color:#8A1C1C}
.rv-code-ok{margin:8px 0 0;font-weight:700;color:#3F6212}
.rv-code-ok.bad{color:#B42318}
.rv-done{border:2px solid var(--lime-deep);border-radius:8px;background:var(--white);padding:clamp(24px,4vw,44px);outline:none}
.rv-done-check{width:56px;height:56px;border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center;font-size:30px;font-weight:800;margin:0 0 18px}
.rv-ticket{margin:26px 0;padding:22px 26px;background:var(--ink);color:rgba(255,255,255,.75);border-radius:6px;font-size:15px;display:inline-block}
.rv-ticket strong{display:block;color:var(--lime);font-weight:800;font-stretch:68%;font-size:clamp(30px,4vw,44px);line-height:1.1;margin-top:4px;letter-spacing:.01em}
@media (max-width:760px){.rv-steps{grid-template-columns:1fr}.rv-steps li:not(:last-child)::after{background:var(--line)}}
/* review admin */
.r-table small{display:block;color:var(--muted);font-size:13px;font-weight:400}
.r-table th[data-k]{cursor:pointer}
.linkbtn{all:unset;cursor:pointer;font-weight:800;font-stretch:68%;font-size:18px;color:var(--purple)}
.pill.ty-video_review{background:#E6E4F0;color:var(--ink)}
.pill.ty-protest_eligibility,.pill.ty-protest_other{background:var(--purple);color:#fff}
.pill.ty-complaint{background:#FFE9A8;color:#5A4300}
.r-table .late,.m-info .late{color:#B42318;font-weight:700}
img.r-video{display:block;max-width:100%;height:auto}
.pill.st-new{background:var(--lime);color:var(--ink)}
.pill.st-under_review{background:#FFE9A8;color:#5A4300}
.pill.st-reviewed{background:#D6E4FF;color:#1B3C8C}
.pill.st-answer_sent{background:#D9F2DD;color:#1E5A2B}
.pill.st-closed{background:#E6E4F0;color:var(--muted)}
.r-status{font:inherit;padding:9px 12px;border:2px solid var(--line);border-radius:4px;background:var(--white)}
.r-two{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-top:22px}
.r-two h3,.r-detail h3{font-size:18px;text-transform:none;font-stretch:88%;margin-bottom:8px}
.r-quote{margin:0;padding:14px 18px;background:var(--white);border-left:4px solid var(--purple);border-radius:4px;white-space:pre-wrap}
.r-video{width:100%;max-width:760px;background:#000;border-radius:6px;margin:6px 0 12px}
.r-mail{white-space:pre-wrap;font:inherit;font-size:15.5px;line-height:1.6;background:var(--white);border:1px solid var(--line);border-radius:6px;padding:20px 22px;margin:8px 0 14px}
.r-preview{margin-top:28px;padding:22px;border:2px solid var(--lime-deep);border-radius:6px;background:#FBFDF0}
@media (max-width:760px){.r-two{grid-template-columns:1fr}}
.cs-quote{white-space:pre-wrap;margin:0}
.cs-list{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:12px}
.cs-list li{background:var(--white);border:1px solid var(--line);border-left:4px solid var(--lime);border-radius:4px;padding:12px 16px;white-space:pre-wrap;line-height:1.5}
.cs-list li small{display:block;color:var(--muted);font-size:13.5px;margin-bottom:4px;white-space:normal}
.cs-list li.late{border-left-color:#B42318}
.r-table small.supp{color:var(--purple);font-weight:700}

/* ---------- partner page: Veo (/veo/) ---------- */
.veo .eyebrow{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--purple)}
.veo-hero .eyebrow,.veo .sec-dark .eyebrow{color:var(--lime)}
.veo-hero{background:var(--ink);color:var(--white);overflow:hidden}
.veo-hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--gap);align-items:center;padding-block:clamp(44px,6vw,88px)}
.veo-hero h1{font-size:clamp(52px,8vw,112px);margin:6px 0 0}
.veo-hero h1 span{display:block}
.veo-hero h1 span+span{color:var(--lime)}
.veo-hero .lead{margin-top:22px;max-width:46ch;color:rgba(255,255,255,.86)}
.veo-hero .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.veo-hero-media{border-radius:6px;overflow:hidden;aspect-ratio:4/5;background:linear-gradient(135deg,var(--purple),var(--violet))}
.veo-hero-media img{width:100%;height:100%;object-fit:cover}
.veo-lockup{display:flex;align-items:center;gap:18px;margin:0 0 34px;padding-bottom:26px;border-bottom:1px solid var(--line-dark)}
.veo-lockup img{height:34px;width:auto}
.veo-lockup .veo-logo{height:30px}
.veo-lockup .x{font-size:28px;line-height:1;color:var(--lime);font-weight:300}
.veo-lockup .img-fallback{font-size:38px;line-height:1;text-transform:none;letter-spacing:-.02em;font-stretch:100%}
.veo-benefits{list-style:none;margin:clamp(36px,5vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,24px);counter-reset:vb}
.veo-benefits li{counter-increment:vb;background:var(--paper);border-radius:6px;padding:26px 22px;border-top:4px solid var(--lime-deep)}
.veo-benefits li::before{content:"0" counter(vb);display:block;font-weight:800;font-stretch:68%;font-size:34px;line-height:1;color:var(--purple);margin-bottom:16px}
.veo-benefits h3{font-size:clamp(20px,1.8vw,24px);margin-bottom:10px}
.veo-benefits p{margin:0;color:var(--muted)}
.veo-closing{margin:28px 0 0;max-width:62ch;font-weight:600}
.veo-offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.veo-offer{position:relative;background:var(--white);border:1px solid var(--line);border-radius:6px;padding:clamp(24px,3vw,40px);display:flex;flex-direction:column}
.veo-offer h3{font-size:clamp(26px,2.6vw,36px);margin:4px 0 16px;max-width:18ch}
.veo-offer>p{margin:0 0 6px}
.veo-badge{align-self:flex-start;background:var(--lime);color:var(--ink);font-size:13px;font-weight:700;padding:6px 10px;border-radius:4px;margin-bottom:12px}
.veo-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:22px}
.veo-terms{margin-top:auto;padding-top:22px}
.veo-terms summary{cursor:pointer;font-weight:700;font-size:15px;color:var(--muted);border-top:1px solid var(--line);padding-top:16px}
.veo-terms ul{margin:12px 0 0;padding-left:18px;font-size:14px;color:var(--muted)}
.veo-terms li{margin:4px 0}
.veo-trial{background:var(--lime);color:var(--ink)}
.veo-trial .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 32px;padding-block:clamp(32px,4vw,48px)}
.veo-trial h2{font-size:clamp(28px,3.4vw,44px)}
.veo-trial p{margin:6px 0 0;font-weight:600}
.veo-go-lead{max-width:52ch;color:rgba(255,255,255,.86);margin:0 0 clamp(28px,4vw,44px)}
.veo-go{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.veo-go article{border-top:1px solid var(--line-dark);padding-top:22px}
.veo-go h3{font-size:clamp(22px,2.2vw,28px);margin-bottom:12px}
.veo-go article>p:last-child{margin:0;color:rgba(255,255,255,.82)}
.veo-quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.veo-quotes figure{margin:0;background:var(--purple);color:var(--white);border-radius:6px;padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.veo-quotes figure+figure{background:var(--ink)}
.veo-quotes blockquote{margin:0}
.veo-quotes blockquote p{margin:0;font-size:clamp(18px,1.6vw,21px);line-height:1.45;font-weight:600}
.veo-quotes figcaption{font-size:15px;color:rgba(255,255,255,.75);border-top:2px solid var(--lime);padding-top:14px}
.veo-quotes figcaption strong{display:block;color:var(--white);font-size:17px}
.veo-help{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.veo-help a{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:6px;padding:26px 24px;text-decoration:none;transition:border-color .15s,transform .15s}
.veo-help a:hover{border-color:var(--purple);transform:translateY(-2px)}
.veo-help h3{font-size:clamp(20px,1.8vw,24px);margin-bottom:10px}
.veo-help p{color:var(--muted);margin:0 0 18px}
.veo-help .textlink{margin-top:auto;align-self:flex-start}
.veo-note{margin-top:28px}
.veo-social{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.veo-social img{height:26px;width:auto;filter:brightness(0) saturate(100%) invert(14%) sepia(52%) saturate(4000%) hue-rotate(245deg) brightness(80%)}
.veo-social p{margin:0;font-weight:700;font-size:15px;color:var(--muted)}
.veo-social ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.veo-social a{text-decoration:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);color:var(--purple);transition:background .15s,color .15s,border-color .15s}
.veo-social a:hover{background:var(--purple);border-color:var(--purple);color:var(--white)}
.veo-social svg{fill:currentColor}
.veo-social .in{font-weight:800;font-size:17px;line-height:1;letter-spacing:-.02em}
@media (max-width:980px){.veo-benefits{grid-template-columns:repeat(2,minmax(0,1fr))}.veo-help{grid-template-columns:1fr}}
@media (max-width:860px){
  .veo-hero .wrap{grid-template-columns:1fr}
  .veo-hero-media{aspect-ratio:16/10;order:-1}
  .veo-offers,.veo-go,.veo-quotes{grid-template-columns:1fr}
}
@media (max-width:520px){
  .veo-benefits{grid-template-columns:1fr}
  .veo-lockup{gap:12px}.veo-lockup img{height:28px}.veo-lockup .img-fallback{font-size:32px}
  .veo-trial .btn{width:100%;justify-content:center}
}

/* ---------- stories: row on the homepage + full-screen player ---------- */
.stories-band{background:var(--ink);color:var(--white);border-top:1px solid var(--line-dark)}
.stories-band .wrap{padding-block:clamp(26px,3.5vw,40px)}
.stories-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}
.stories-head h2{font-size:clamp(24px,2.6vw,32px)}
.stories-scroller{position:relative}
.stories-row{list-style:none;margin:0;padding:0 0 6px;display:flex;gap:clamp(10px,1.4vw,16px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.stories-row::-webkit-scrollbar{display:none}
.stories-row li{flex:0 0 clamp(132px,15vw,188px);scroll-snap-align:start}
.story-card{position:relative;display:block;width:100%;aspect-ratio:9/16;padding:0;border:0;border-radius:10px;overflow:hidden;cursor:pointer;background:linear-gradient(160deg,var(--purple),var(--violet));color:var(--white);font:inherit;text-align:left;transition:transform .18s}
.story-card:hover{transform:translateY(-3px)}
.story-card:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.story-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.story-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,6,30,0) 45%,rgba(10,6,30,.85))}
.story-noposter{position:absolute;inset:0;background:url('/proxy?url=https%3A%2F%2Fsoccafederation.com%2Fassets%2Fimg%2Fsocca-logo-white.svg') center 40%/60% no-repeat}
.story-title{position:absolute;left:12px;right:12px;bottom:12px;z-index:1;font-weight:700;font-size:15px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.story-new{position:absolute;top:10px;left:10px;z-index:1;background:var(--lime);color:var(--ink);font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:4px}
.story-play{position:absolute;top:10px;right:10px;z-index:1;width:30px;height:30px;border-radius:50%;background:rgba(10,6,30,.55)}
.story-play::before{content:"";position:absolute;left:12px;top:9px;border-left:9px solid var(--white);border-top:6px solid transparent;border-bottom:6px solid transparent}
.stories-arrow{position:absolute;top:50%;z-index:2;width:44px;height:44px;margin-top:-22px;border-radius:50%;border:0;background:var(--white);color:var(--ink);cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.stories-arrow::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;border-right:3px solid currentColor;border-top:3px solid currentColor;transform:translate(-65%,-50%) rotate(45deg)}
.stories-prev{left:-14px}.stories-prev::before{transform:translate(-35%,-50%) rotate(-135deg)}
.stories-next{right:-14px}
@media (max-width:760px){.stories-arrow{display:none}}

.sp-lock,.sp-lock body{overflow:hidden}
.sp{position:fixed;inset:0;z-index:200;background:rgba(6,4,18,.94);display:none;align-items:center;justify-content:center}
.sp.open{display:flex}
.sp-frame{position:relative;height:min(100dvh,100vh);max-height:100vh;aspect-ratio:9/16;max-width:100vw;background:#000;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
@media (min-width:700px){.sp-frame{height:min(92vh,880px);border-radius:12px}}
@media (max-width:699px){.sp .sp-frame{width:100vw;height:100dvh;aspect-ratio:auto;max-height:none}.sp .sp-video{object-fit:cover}.sp .sp-frame.is-land .sp-video{object-fit:contain}}
.sp-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.sp-bars{position:absolute;top:10px;left:10px;right:10px;z-index:3;display:flex;gap:4px}
.sp-bars span{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.sp-bars i{display:block;height:100%;background:var(--white)}
.sp-top{position:absolute;top:20px;left:12px;right:8px;z-index:3;display:flex;align-items:center;gap:6px;color:var(--white);background:none}
.sp-top::before{content:"";position:absolute;left:-12px;right:-8px;top:-20px;height:110px;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0));z-index:-1}
.sp-title{flex:1;font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:4px}
.sp-btn{width:40px;height:40px;border:0;border-radius:50%;background:rgba(0,0,0,.25);color:var(--white);font-size:28px;line-height:1;cursor:pointer;display:grid;place-items:center}
.sp-btn:hover{background:rgba(0,0,0,.5)}
.sp-mute::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 8v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1a7 7 0 0 1 0 13.4v2.1a9 9 0 0 0 0-17.6z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 8v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1a7 7 0 0 1 0 13.4v2.1a9 9 0 0 0 0-17.6z'/%3E%3C/svg%3E") center/contain no-repeat}
.sp-mute.is-muted::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.6 3 2.7-2.7-1.4-1.4-2.7 2.7-2.7-2.7-1.4 1.4 2.7 2.7-2.7 2.7 1.4 1.4 2.7-2.7 2.7 2.7 1.4-1.4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.6 3 2.7-2.7-1.4-1.4-2.7 2.7-2.7-2.7-1.4 1.4 2.7 2.7-2.7 2.7 1.4 1.4 2.7-2.7 2.7 2.7 1.4-1.4z'/%3E%3C/svg%3E")}
.sp-tap{position:absolute;top:80px;bottom:90px;z-index:2;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sp-tap:focus-visible{outline:2px solid var(--lime);outline-offset:-4px}
.sp-tap-prev{left:0;width:33%}.sp-tap-next{right:0;width:67%}
.sp-link{position:absolute;left:50%;bottom:28px;z-index:3;transform:translateX(-50%);white-space:nowrap}
.sp-paused{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);background:rgba(0,0,0,.55);color:var(--white);font-weight:700;padding:8px 14px;border-radius:4px}
.sp-side{display:none}
@media (min-width:700px){
  .sp-side{display:block;position:absolute;top:50%;width:52px;height:52px;margin-top:-26px;border-radius:50%;border:0;background:rgba(255,255,255,.12);cursor:pointer}
  .sp-side:hover{background:rgba(255,255,255,.25)}
  .sp-side::before{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;border-right:3px solid var(--white);border-top:3px solid var(--white)}
  .sp-side-prev{left:calc(50% - min(92vh,880px)*9/32 - 84px)}.sp-side-prev::before{transform:translate(-35%,-50%) rotate(-135deg)}
  .sp-side-next{right:calc(50% - min(92vh,880px)*9/32 - 84px)}.sp-side-next::before{transform:translate(-65%,-50%) rotate(45deg)}
}

/* stories admin */
.s-eyebrow{margin:0 0 6px!important;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--purple)}
.s-new{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:clamp(18px,3vw,30px);margin-bottom:clamp(28px,4vw,44px)}
.s-new h2,.s-h2{font-size:clamp(22px,2.4vw,28px);margin-bottom:16px}
.s-drop{margin-bottom:12px}
.s-msg{margin:0 0 14px;padding:10px 14px;border-left:4px solid var(--lime-deep);background:var(--paper);font-size:15px}
.s-msg.bad{border-left-color:#B3261E;color:#8A1C16}
.s-preview{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;align-items:start;margin:8px 0 6px}
.s-preview video{width:150px;aspect-ratio:9/16;object-fit:cover;border-radius:8px;background:var(--ink)}
.s-more{margin-bottom:12px}.s-more summary{cursor:pointer;font-weight:700;color:var(--purple);margin-bottom:12px}
.s-list{display:grid;gap:10px}
.s-item{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:6px;padding:10px}
.s-thumb{width:64px;aspect-ratio:9/16;border-radius:6px;overflow:hidden;background:linear-gradient(160deg,var(--purple),var(--violet))}
.s-thumb img{width:100%;height:100%;object-fit:cover}
.s-info{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.s-info .pill{grid-row:auto}
.s-info strong{font-size:17px;overflow-wrap:anywhere}
.s-info small{color:var(--muted);font-size:14px}
.s-btns{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:4px;font-size:15px}
.s-btns .linkbtn{background:none;border:0;padding:0;font:inherit;font-weight:700;cursor:pointer;color:var(--text);text-decoration:underline;text-decoration-color:var(--lime-deep);text-decoration-thickness:3px;text-underline-offset:5px}
.s-btns .s-del{text-decoration-color:#B3261E}
@media (max-width:560px){.s-preview{grid-template-columns:110px minmax(0,1fr);gap:14px}.s-preview video{width:110px}}
.article-share{margin-left:6px;font:inherit;font-weight:700;font-size:14px;color:var(--white);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);border-radius:4px;padding:7px 14px;cursor:pointer}
.article-share:hover{background:var(--lime);border-color:var(--lime);color:var(--ink)}