/* market theme — the pl tokens; @core marks where the shared layout goes. Generated from service-sitegen/prototypes/themes (Anastasiia's MR !1 + the 2026-10-08 banner mockup); edit here, not there. */
:root{
    --club:#C8102E;
    --club-dark:#0A0A0C;
    --ground:#F4F5F7;
    --surface:#FFFFFF;
    --surface-2:#E9ECEF;
    --ink:#121418;
    --ink-2:#5A616B;
    --ink-3:#656C77;
    --line:#DCDFE4;
    --band-ink:#FFFFFF;
    --band-ink-2:#B9BCC4;
    --on-dark:#FF5C73;
    /* The white-and-red flag: two horizontal bands, so the gradient runs top to bottom. */
    --flag:linear-gradient(180deg,#FFFFFF 0 50%,#DC143C 50%);
    --font-display:"Barlow Condensed",system-ui,sans-serif;
    --font-body:"Barlow",system-ui,sans-serif;
    --font-mono:"JetBrains Mono",ui-monospace,monospace;
    color-scheme:light;
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --ground:#0B0B0D; --surface:#141518; --ink:#F0F1F3; --ink-2:#A4A8B0;
      --ink-3:#7A818C; --line:#262A31; --club:#F0455F; --surface-2:#1C1F25;
      --on-dark:#FF6B80;
      color-scheme:dark;
    }
  }
/* market theme — the layout shared by it/fr/pl. Generated from service-sitegen/prototypes/themes (Anastasiia's MR !1 + the 2026-10-08 banner mockup); edit here, not there. */
*{box-sizing:border-box}
  body{margin:0;background:var(--ground);color:var(--ink);
       font-family:var(--font-body);font-size:16px;line-height:1.6}
  img{max-width:100%}

  .wrap{max-width:1080px;margin:0 auto;padding-inline:22px}

  /* ---- header ---- */
  .top{background:var(--club-dark);color:#fff;position:relative}
  /* The market's flag stripe. Three pixels is enough to be recognised and too little to
     start competing with the club crest for attention. Decoration, so it needs no
     `aria-hidden`: a pseudo-element is not in the accessibility tree to begin with. */
  .top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
    background:var(--flag)}
  .top__in{display:flex;align-items:center;justify-content:space-between;gap:18px;
           padding-block:14px;flex-wrap:wrap}
  .brand{font-family:var(--font-display);font-weight:800;font-size:17px;letter-spacing:-.01em}
  /* The accent ON A DARK BAND is its own token. `--club` is picked to sit on a light
     ground, so on a header painted in the club colour (the French nav on navy, the
     Polish one on red) that same hue landed on itself. */
  .brand span{color:var(--on-dark)}
  .top nav{display:flex;gap:20px;flex-wrap:wrap}
  .top nav a{color:rgba(255,255,255,.80);text-decoration:none;font-size:14px;letter-spacing:.03em;
             text-transform:uppercase;font-weight:600}
  .top nav a[aria-current]{color:#fff;box-shadow:inset 0 -2px 0 var(--on-dark)}

  /* ---- hero band ---- */
  .hero{position:relative;background:var(--club-dark);color:var(--band-ink);overflow:hidden}
  .hero::before{content:"";position:absolute;inset:0;
    background:radial-gradient(120% 95% at 72% 50%, color-mix(in srgb, var(--club) 62%, transparent) 0%, transparent 62%);}
  .hero::after{content:attr(data-jersey);position:absolute;right:-2%;top:50%;transform:translateY(-50%);
    font-family:var(--font-display);font-weight:800;font-size:clamp(260px,38vw,520px);
    line-height:1;color:#fff;opacity:.05;pointer-events:none}
  .hero__in{position:relative;display:grid;grid-template-columns:minmax(300px,1fr) 1fr;
            gap:34px;align-items:end;padding-block:24px 0;min-height:500px}
  .shot{margin:0;align-self:center;display:flex;flex-direction:column;
        max-width:380px;width:100%}
  .card{position:relative;background:#fff;border-radius:7px;overflow:hidden;
        box-shadow:0 18px 44px rgba(0,0,0,.5);line-height:0}
  .card img{display:block;width:100%;height:auto}
  .card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;
               background:var(--club)}
  .card .badge{position:absolute;top:0;left:0;z-index:2;background:var(--club);color:#fff;
    font-family:var(--font-display);font-weight:800;font-size:19px;line-height:1;
    padding:9px 13px 10px;border-bottom-right-radius:7px;letter-spacing:-.01em}
  .shot figcaption{font-family:var(--font-mono);font-size:10.5px;color:#7E838D;
            letter-spacing:.05em;line-height:1.5}
  .ident{padding-bottom:34px;display:flex;flex-direction:column;gap:9px}
  .ident__meta{font-family:var(--font-mono);font-size:12.5px;color:var(--band-ink-2);
               letter-spacing:.05em}
  .ident__no{font-family:var(--font-display);font-weight:800;font-size:42px;color:var(--on-dark);
             line-height:.9;letter-spacing:-.02em}
  .ident__name{font-family:var(--font-display);font-weight:500;font-size:clamp(30px,5.4vw,52px);
               line-height:.94;letter-spacing:-.02em;text-transform:uppercase;margin:0}
  .ident__name b{display:block;font-weight:800}
  .ident__role{color:var(--on-dark);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
               font-size:14px}

  /* ---- figure strip + bio grid (the block taken from the NBA reference) ---- */
  .band{background:var(--club-dark);color:var(--band-ink);border-top:1px solid rgba(255,255,255,.09)}
  .band__in{display:grid;grid-template-columns:minmax(260px,0.85fr) 1fr;gap:0}
  /* With no right column (on a club the fact card lives in the rail) the strip no longer
     splits in half: otherwise an empty field with a rule is left on the right. */
  .band__in--solo{grid-template-columns:1fr}
  .band__in--solo .keys{border-right:none}
  @media (max-width:860px){ .band__in{grid-template-columns:1fr} .hero__in{grid-template-columns:1fr} }

  .keys{display:grid;grid-template-columns:repeat(4,1fr);border-right:1px solid rgba(255,255,255,.09)}
  /* Number first, label under it: trophy names are long («Mondiale per club maschile
     (record)»), and a label above pushed the figures to different heights across
     neighbouring columns. */
  .key{padding:16px 12px;text-align:center;display:flex;flex-direction:column;
       justify-content:flex-start;border-right:1px solid rgba(255,255,255,.07)}
  .key:last-child{border-right:none}
  .key dt{order:2;font-family:var(--font-mono);font-size:10px;letter-spacing:.07em;
          text-transform:uppercase;color:rgba(255,255,255,.86);margin:6px 0 0;line-height:1.35;
          text-wrap:balance}
  .key dd{order:1;margin:0;font-family:var(--font-display);font-weight:700;font-size:28px;
          line-height:1;font-variant-numeric:tabular-nums}

  .bio{display:grid;grid-template-columns:repeat(4,1fr)}
  .bio div{padding:13px 16px;border-left:1px solid rgba(255,255,255,.09);
           border-bottom:1px solid rgba(255,255,255,.09)}
  .bio div:nth-child(-n+4){border-top:none}
  .bio div:nth-child(n+5){border-bottom:none}
  .bio dt{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;
          text-transform:uppercase;color:var(--band-ink-2);margin:0 0 2px}
  .bio dd{margin:0;font-size:15px;font-weight:600}
  @media (max-width:640px){ .keys{grid-template-columns:repeat(2,1fr)} .bio{grid-template-columns:repeat(2,1fr)} }

  /* ---- tabs ---- */
  .tabs{background:var(--surface);border-bottom:1px solid var(--line)}
  .tabs__in{display:flex;gap:26px;overflow-x:auto}
  .tabs a{padding:14px 0;text-decoration:none;color:var(--ink-2);font-weight:600;font-size:14.5px;
          white-space:nowrap}
  .tabs a[aria-current]{color:var(--ink);box-shadow:inset 0 -3px 0 var(--club)}
  .tabs a:hover{color:var(--ink);box-shadow:inset 0 -3px 0 var(--line)}
  .top nav a:hover{color:#fff}
  a:focus-visible{outline:2px solid var(--club);outline-offset:3px;border-radius:2px}
  html{scroll-behavior:smooth;scroll-padding-top:70px}
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
  section[id]{scroll-margin-top:70px}

  main{padding-block:34px 56px;display:flex;flex-direction:column;gap:38px}

  h2{font-family:var(--font-display);font-weight:700;font-size:21px;letter-spacing:-.01em;
     margin:0 0 14px;text-transform:uppercase}
  .lead{max-width:none;color:var(--ink-2);margin:0 0 18px}

  .panel{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:20px 22px}

  /* Block, not flex: a float inside a flex container is not a float, so the
     in-prose figure sat above the text instead of beside it. */
  /* The grid column sets the width, not a per-element ch limit: at different sizes the
     lead's 68ch and a paragraph's 68ch produced different right edges. */
  .prose{max-width:none;display:block}
  .prose h2{font-size:19px;margin:18px 0 4px;text-transform:none;letter-spacing:-.005em}
  .prose h2:first-child{margin-top:0}
  .prose p{margin:0;color:var(--ink-2)}

  .faq{display:flex;flex-direction:column}
  .faq details{border-bottom:1px solid var(--line);padding:11px 0}
  .faq details:last-child{border-bottom:none}
  .faq summary{cursor:pointer;font-weight:600;font-size:15.5px;list-style:none}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::before{content:"+";color:var(--club);font-family:var(--font-mono);
                       margin-right:9px;font-weight:500}
  .faq details[open] summary::before{content:"−"}
  .faq p{margin:7px 0 0 22px;color:var(--ink-2);font-size:15px;max-width:66ch}

  .scroll{overflow-x:auto}
  table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:580px}
  th,td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
  thead th{font-family:var(--font-display);font-size:11.5px;letter-spacing:.06em;
           text-transform:uppercase;color:var(--ink-2);background:var(--ground)}
  td.n{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
  tbody tr:last-child td{border-bottom:none}
  .now{color:var(--club);font-weight:600}

  .two{display:grid;grid-template-columns:1.35fr 1fr;gap:26px}
  @media (max-width:820px){ .two{grid-template-columns:1fr} }

  .news{display:flex;flex-direction:column;gap:0}
  .news article{padding:13px 0;border-bottom:1px solid var(--line);display:flex;
                flex-direction:column;gap:3px}
  .news article:last-child{border-bottom:none}
  .news time{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3)}
  .news h3{margin:0;font-size:16px;font-weight:600;line-height:1.35}

  .palm{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
  .palm li{display:flex;justify-content:space-between;gap:14px;padding:8px 0;
           border-bottom:1px solid var(--line);font-size:15px}
  .palm li:last-child{border-bottom:none}
  .palm b{font-family:var(--font-mono);font-weight:500;color:var(--club)}

  .squad{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px}
  .mate{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:12px;
        display:flex;flex-direction:column;gap:3px}
  .mate .no{font-family:var(--font-display);font-weight:800;font-size:19px;color:var(--club);line-height:1}
  .mate .nm{font-weight:600;font-size:14.5px;line-height:1.25}
  .mate .rl{font-size:12.5px;color:var(--ink-3)}

  footer{background:var(--club-dark);color:rgba(255,255,255,.9);padding-block:28px;
    font-size:13px;
    position:relative}
  footer::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
    background:var(--flag)}
  footer::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
    background:var(--flag)}
  .foot{display:flex;justify-content:space-between;align-items:flex-start;gap:28px;
        flex-wrap:wrap}
  .foot__txt{display:flex;flex-direction:column;gap:6px;max-width:62ch}
  .foot__txt p{margin:0}
  .foot__txt b{color:#fff;font-weight:600}
  .foot__upd{font-family:var(--font-mono);font-size:11.5px;color:rgba(255,255,255,.74);
             letter-spacing:.04em}
  .foot__nav{display:flex;gap:18px;flex-wrap:wrap}
  /* The same rule as in the header: on a coloured band translucent white works where a
     fixed grey does not — on the red footer it measured 2.8:1. */
  .foot__nav a{color:rgba(255,255,255,.88);text-decoration:none;font-size:13.5px}
  .foot__nav a:hover{color:#fff}


  /* --- inner page header --- */
  .pagehero{background:var(--club-dark);color:#fff;padding-block:34px 30px}
  .pagehero__kick{font-family:var(--font-mono);font-size:12px;letter-spacing:.09em;
    text-transform:uppercase;color:var(--on-dark);margin:0 0 10px}
  .pagehero__in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;
                align-items:center}
  @media (max-width:860px){ .pagehero__in{grid-template-columns:1fr;gap:24px} }
  .pagehero__h1{font-family:var(--font-display);font-weight:800;
    font-size:clamp(28px,4.2vw,42px);line-height:1.05;letter-spacing:-.018em;margin:0;
    text-wrap:balance;max-width:20ch}

  .pagehero__side{display:flex;align-items:center;gap:22px}
  .pagehero__ph{border-radius:50%;object-fit:cover;object-position:top center;
    border:2px solid rgba(255,255,255,.14);flex:none;background:#1A1C21}
  .pagehero__keys{display:grid;grid-template-columns:repeat(2,minmax(96px,auto));
    gap:14px 26px;margin:0}
  .pagehero__keys div{display:flex;flex-direction:column;gap:2px}
  .pagehero__keys dt{font-family:var(--font-mono);font-size:10.5px;
    letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.86);margin:0}
  .pagehero__keys dd{margin:0;font-family:var(--font-display);font-weight:700;
    font-size:23px;line-height:1;font-variant-numeric:tabular-nums;color:#fff}
  @media (max-width:560px){ .pagehero__ph{display:none} }
  .pagehero__dek{margin:0;max-width:62ch;color:rgba(255,255,255,.88);font-size:18px}

  /* --- the lead on the home page --- */



  /* --- larger base size --- */
  body{font-size:18px;line-height:1.68}
  table{font-size:16px}
  .faq p{font-size:17.5px}

  /* ------------------------------------------------------------------
     ONE LEFT EDGE. Main column + 300px rail in a single grid, the way
     factsheet.css solved the same problem on 2026-09-16. Nothing inside
     re-centres itself, so every block starts on the same vertical line.
     ------------------------------------------------------------------ */
  .sheet{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:34px;
         align-items:start;padding-block:30px 10px}
  .sheet-main{min-width:0;display:flex;flex-direction:column;gap:26px}
  .sheet-rail{position:sticky;top:76px;display:grid;gap:20px}
  @media (max-width:900px){
    .sheet{grid-template-columns:1fr;gap:30px}
    .sheet-rail{position:static}
  }

  /* The same measure as the sections: otherwise the lead reads wider than the article. */
  /* No margin-bottom here: the lead and the prose block are siblings in a flex column,
     so its gap already provides the space and the margin was stacking on top. */
  .lead{font-size:19.5px;color:var(--ink);margin:0;max-width:none}
  .prose--flush{max-width:none;margin-inline:0}
  .prose h2{clear:both;font-size:22px;margin:26px 0 8px;text-transform:none;letter-spacing:-.005em}
  .prose h2:first-child{margin-top:0}
  .prose::after{content:'';display:block;clear:both}
  .prose p{margin:0 0 15px;color:var(--ink-2);font-size:18.5px;line-height:1.72}
  .prose a{color:var(--club)}

  .blk{display:flex;flex-direction:column;gap:0}
  .blkhead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
           border-bottom:2px solid var(--ink);padding-bottom:9px;margin-bottom:16px}
  .blkhead h2{margin:0;font-size:20px;text-transform:uppercase;letter-spacing:.01em}
  .blkhead span{font-family:var(--font-mono);font-size:12px;color:var(--ink-3);
                letter-spacing:.07em;text-transform:uppercase}

  /* --- rail blocks --- */
  .railblk{border:1px solid var(--line);background:var(--surface);border-radius:4px;
           padding:16px 18px}
  .railhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
    font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.09em;
    text-transform:uppercase;margin:0 0 12px;padding-bottom:9px;
    border-bottom:1px solid var(--line)}
  .railhead span{font-family:var(--font-mono);font-weight:400;color:var(--club)}
  .railblk .palm{list-style:none;margin:0;padding:0}
  .railblk .palm li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
    border-bottom:1px solid var(--line);font-size:15px}
  .railblk .palm li:last-child{border-bottom:none}
  .railblk .palm b{font-family:var(--font-mono);color:var(--club);font-weight:500}
  .mates{list-style:none;margin:0;padding:0}
  .mates li{display:flex;flex-direction:column;gap:1px;padding:8px 0;
            border-bottom:1px solid var(--line)}
  .mates li:last-child{border-bottom:none}
  .mates .nm{font-weight:600;font-size:15px}
  .mates .rl{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3);
             letter-spacing:.05em;text-transform:uppercase}
  .seealso{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
  .seealso li{border-bottom:1px solid var(--line)}
  .seealso li:last-child{border-bottom:none}
  .seealso a{display:block;padding:9px 0;text-decoration:none;color:var(--ink);font-size:15px}
  .seealso a:hover{color:var(--club)}

  body{font-size:18px;line-height:1.68}
  table{font-size:16px}
  .faq p{font-size:17.5px}

  .gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
  .gallery figure{margin:0;border:1px solid var(--line);border-radius:4px;overflow:hidden;
    background:var(--surface);aspect-ratio:4/5}
  .gallery img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;
    transition:transform .25s ease}
  .gallery figure:hover img{transform:scale(1.03)}
  .credit{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3);
          margin:11px 0 0;letter-spacing:.04em}

  /* --- brand: do not let the host's styles colour the link --- */
  .brand, .brand:link, .brand:visited, .brand:hover, .brand:active{
    color:#fff;text-decoration:none}
  .brand span{color:var(--on-dark)}
  .top nav a, .top nav a:visited, .foot__nav a, .foot__nav a:visited,
  .narch__link, .narch__link:visited, .backlink a, .backlink a:visited,
  .pagehero__kick a, .pagehero__kick a:visited{text-decoration:none}

  /* --- news archive --- */
  .narch{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
  .narch__item{padding:17px 0;border-bottom:1px solid var(--line);display:flex;
    flex-direction:column;gap:5px}
  .narch__item:last-child{border-bottom:none}
  .narch__date{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3);
    letter-spacing:.05em}
  .narch__link{font-family:var(--font-display);font-weight:700;font-size:18.5px;
    line-height:1.32;color:var(--ink)}
  .narch__link:hover{color:var(--club)}
  .narch__src{font-family:var(--font-mono);font-size:11.5px;color:var(--club);
    letter-spacing:.04em}
  .narch__prose{margin:4px 0 0;color:var(--ink-2);font-size:17px;line-height:1.65}

  /* --- in-body photos --- */
  /* A portrait frame is narrower than the column, so the text wraps around it; a
     landscape one fills the measure and stands on a line of its own. */
  .artfig{float:right;margin:4px 0 16px 26px;max-width:230px;width:100%}
  .artfig--wide{float:none;margin:22px 0 26px;max-width:100%}
  .artfig img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;
    border-radius:4px;background:var(--surface-2,#e9ecef)}
  .artfig--wide img{aspect-ratio:3/2}
  /* A landscape frame that the text wraps around: wider than a portrait one, because at
     230px a face inside a 3:2 crop becomes unreadable. */
  .artfig--land{float:right;margin:4px 0 16px 28px;max-width:320px;width:100%}
  .artfig--land img{aspect-ratio:3/2}
  @media (max-width:560px){ .artfig,.artfig--land{float:none;margin-inline:0;max-width:100%} }
  .artfig .credit{margin:9px 0 0;font-family:var(--font-mono);font-size:11px;
    line-height:1.45;color:var(--ink-3)}

  /* The news item's opening shot: full measure at 3:2 — the same frame as on the card. */
  .leadfig{margin:0;max-width:100%}
  .leadfig img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;
    border-radius:6px;background:var(--surface-2,#e9ecef)}
  .leadfig .credit{margin:9px 0 0;font-family:var(--font-mono);font-size:11px;
    line-height:1.45;color:var(--ink-3)}

  .pagehero__h1--news{max-width:26ch;font-size:clamp(25px,3.4vw,36px)}
  /* A hard-coded grey broke on a coloured header: on red it read as a dirty smudge.
     Translucent white works whatever the band is painted. */
  .pagehero__meta{margin:12px 0 0;font-family:var(--font-mono);font-size:12.5px;
    color:rgba(255,255,255,.72)}
  .pagehero__kick a{color:var(--on-dark)}
  .backlink{margin:26px 0 0}
  .backlink a{color:var(--club);font-weight:600}

  .newshead{font-family:var(--font-display);font-weight:700;font-size:23px;margin:0 0 14px;
            max-width:34ch}
  .newssrc{margin:22px 0 0;font-family:var(--font-mono);font-size:12.5px;
           color:var(--ink-3)}
  .newssrc a{color:var(--club)}

  /* --- news cards: a large lead card, the rest in a grid (as on the live site) --- */
  .ncards{list-style:none;margin:0 0 34px;padding:0;display:grid;gap:18px;
          grid-template-columns:repeat(3,minmax(0,1fr))}
  @media (max-width:820px){ .ncards{grid-template-columns:repeat(2,minmax(0,1fr))} }
  @media (max-width:520px){ .ncards{grid-template-columns:1fr} }
  .ncards__item--lead{grid-column:1/-1}
  .ncard{display:grid;gap:0;text-decoration:none;color:inherit;
    border:1px solid var(--line);border-radius:5px;overflow:hidden;background:var(--surface);
    transition:border-color .18s ease,transform .18s ease}
  .ncard:hover{border-color:var(--club);transform:translateY(-2px)}
  .ncard__media{display:block;background:var(--surface-2,#e9ecef);aspect-ratio:16/9;
                overflow:hidden}
  .ncard__media img{width:100%;height:100%;object-fit:cover;display:block}
  .ncard__body{display:flex;flex-direction:column;gap:7px;padding:14px 16px 16px;
               flex:1}
  .ncard{height:100%}
  .ncards__item{display:flex}
  .ncard__title{font-family:var(--font-display);font-weight:700;font-size:17px;
                line-height:1.32;display:-webkit-box;-webkit-line-clamp:3;
                -webkit-box-orient:vertical;overflow:hidden}
  .ncard__teaser{color:var(--ink-2);font-size:15.5px;line-height:1.55}
  .ncard__meta{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3);
               letter-spacing:.04em;margin-top:2px}
  .ncard:hover .ncard__title{color:var(--club)}

  @media (min-width:760px){
    .ncard--lead{grid-template-columns:1.25fr 1fr;align-items:stretch}
    .ncard--lead .ncard__media{aspect-ratio:auto;height:100%;min-height:230px}
    .ncard--lead .ncard__body{justify-content:center;padding:22px 26px}
    .ncard--lead .ncard__title{font-size:26px;line-height:1.18;-webkit-line-clamp:3}
    .ncard--lead .ncard__teaser{font-size:17px}
  }

  /* ======================= CLUB ======================= */
  /* A crest instead of a portrait: the logo is vector and on a transparent ground, so no
     crop — just padding, or it runs into the band colour. */
  /* `min-height:500px` on a player holds the height for the portrait card. A crest is a
     ~170px square, so the same height left half a screen empty above the fact strip. */
  .hero--club .hero__in{grid-template-columns:168px minmax(0,1fr);align-items:center;
    min-height:0;padding-block:38px}
  .crest{margin:0;padding:18px;background:rgba(255,255,255,.07);border-radius:10px;
    display:grid;place-items:center}
  .crest img{width:100%;height:auto;max-width:132px;display:block}
  @media (max-width:860px){ .hero--club .hero__in{grid-template-columns:1fr} }
  .pagehero__ph--crest{object-fit:contain;background:rgba(255,255,255,.07);padding:8px}

  /* Roster: a grid of cards within one position group. */
  .rosa{margin-top:18px}
  .rosa__role{margin:0 0 9px;font-family:var(--font-mono);font-size:11.5px;
    letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
    display:flex;align-items:baseline;gap:8px}
  .rosa__role span{color:var(--club)}
  .rosa__list{list-style:none;margin:0;padding:0;display:grid;
    grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
  .rosa__card{display:flex;align-items:center;gap:11px;padding:9px 11px;
    border:1px solid var(--line);border-radius:7px;background:var(--surface)}
  .rosa__ph{flex:0 0 42px;width:42px;height:42px;border-radius:50%;overflow:hidden;
    background:var(--surface-2,#e9ecef)}
  .rosa__ph img{width:100%;height:100%;object-fit:cover;display:block}
  .rosa__who{min-width:0;display:flex;flex-direction:column;gap:2px}
  .rosa__name{font-weight:600;font-size:15px;color:var(--ink);text-decoration:none;
    overflow-wrap:anywhere}
  a.rosa__name:hover{color:var(--club)}
  .rosa__meta{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3)}

  /* Transfers: arrivals and departures in two columns per season. */
  .merc + .merc{border-top:1px solid var(--line);margin-top:16px;padding-top:16px}
  .merc__season{margin:16px 0 10px;font-family:var(--font-mono);font-size:13px;
    font-weight:500;color:var(--ink)}
  .merc__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  @media (max-width:640px){ .merc__cols{grid-template-columns:1fr} }
  .merc__lab{margin:0 0 7px;font-family:var(--font-mono);font-size:11px;
    letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
    display:flex;align-items:baseline;gap:7px}
  /* The green and the red run dark: the pastel #5BC88A / #D4737A measured 1.9:1 on a
     light ground, which made the «Arrivi 7» label all but unreadable. */
  .merc__col--in .merc__lab{color:#1C7A45}
  .merc__col--out .merc__lab{color:#A8263A}
  .merc__col ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
  .merc__col li{font-size:15px;color:var(--ink-2);padding-left:13px;position:relative}
  .merc__col li::before{content:'';position:absolute;left:0;top:.62em;width:5px;height:5px;
    border-radius:50%;background:currentColor;opacity:.45}
  .merc__col a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
  .merc__col a:hover{color:var(--club);border-color:var(--club)}

  /* The rail's fact card: the same key/value pairs as the strip under the header. */
  .fcard{margin:0;display:grid;gap:9px}
  .fcard>div{display:grid;gap:1px}
  .fcard dt{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--ink-3)}
  .fcard dd{margin:0;font-size:14.5px;color:var(--ink);overflow-wrap:anywhere}


  /* ---- squad snapshot ---- */
  .blkmore{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.07em;
    text-transform:uppercase;color:var(--club);text-decoration:none}
  .blkmore:hover{text-decoration:underline}
  .snapgrid{list-style:none;margin:16px 0 0;padding:0;display:grid;
    grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:14px}
  .snapgrid b{display:block;font-family:var(--font-display);font-weight:700;
    font-size:27px;line-height:1.1;letter-spacing:-.02em}
  .snapgrid b i{font-style:normal;font-size:14px;font-weight:500;color:var(--ink-3);
    margin-left:2px}
  .snapgrid span{display:block;margin-top:3px;font-family:var(--font-mono);
    font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
  .snaprow{margin:14px 0 0;font-size:14.5px;color:var(--ink-2)}
  .snaprow b{color:var(--ink);font-weight:600}
  .snaprow .c{color:var(--club);font-weight:600}

  /* ---- roster filter ---- */
  .sqfilter{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 16px}
  .sqchip{font:inherit;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;
    gap:7px;padding:7px 14px;border-radius:999px;border:1px solid var(--line);
    background:var(--surface);color:var(--ink-2)}
  .sqchip i{font-style:normal;font-family:var(--font-mono);font-size:11.5px;
    color:var(--ink-3)}
  .sqchip:hover{border-color:var(--club);color:var(--ink)}
  .sqchip.is-on{background:var(--club);border-color:var(--club);color:#fff}
  .sqchip.is-on i{color:rgba(255,255,255,.75)}

  /* ---- profile grid ---- */
  .pgrid{list-style:none;margin:0;padding:0;display:grid;
    grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
  .pc[hidden]{display:none}
  .pc-in{display:block;border:1px solid var(--line);border-radius:8px;overflow:hidden;
    background:var(--surface);color:inherit;text-decoration:none;height:100%}
  a.pc-in:hover{border-color:var(--club)}
  a.pc-in:hover .pc-name{color:var(--club)}
  .pc-ph{display:block;position:relative;aspect-ratio:3/4;background:var(--surface-2);
    display:grid;place-items:center;overflow:hidden}
  .pc-ph img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
  .pc-ini{font-family:var(--font-display);font-weight:700;font-size:34px;color:var(--ink-3);
    opacity:.5;letter-spacing:.02em}
  .pc-body{display:block;padding:11px 12px 13px}
  .pc-pos{display:block;font-family:var(--font-mono);font-size:10.5px;
    letter-spacing:.08em;text-transform:uppercase;color:var(--club)}
  .pc-name{display:block;margin-top:4px;font-weight:600;font-size:15px;line-height:1.3;
    color:var(--ink);overflow-wrap:anywhere}
  .pc-meta{display:block;margin-top:4px;font-family:var(--font-mono);
    font-size:11px;color:var(--ink-3)}

  /* ---- doors into the sections ---- */
  .doors__lead{margin:14px 0 0;color:var(--ink-2);font-size:15.5px}
  .doorgrid{list-style:none;margin:16px 0 0;padding:0;display:grid;
    grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px}
  .door a{display:grid;gap:5px;height:100%;padding:15px 16px;border-radius:8px;
    border:1px solid var(--line);background:var(--surface);text-decoration:none;
    color:inherit;position:relative}
  .door a:hover{border-color:var(--club)}
  .door__k{font-weight:700;font-size:16.5px;color:var(--ink);letter-spacing:-.01em}
  .door a:hover .door__k{color:var(--club)}
  .door__p{font-size:14px;color:var(--ink-2);line-height:1.45}
  .door__go{justify-self:end;margin-top:4px;color:var(--club);font-size:17px;line-height:1}

  /* ---- breadcrumb on a mounted profile ---- */
  .crumb{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.05em;
    color:var(--ink-3);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
  .crumb a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line)}
  .crumb a:hover{color:var(--club);border-color:var(--club)}
  .crumb i{font-style:normal;opacity:.5}


  /* ---- second menu row: a player's sections inside a club site ---- */
  .subnav{background:var(--surface);border-bottom:1px solid var(--line)}
  .subnav__in{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-block:9px}
  .subnav__who{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
  .subnav nav{display:flex;flex-wrap:wrap;gap:4px 16px}
  .subnav a{font-size:14px;color:var(--ink-2);text-decoration:none;padding-block:2px}
  .subnav a:hover{color:var(--club)}
  .subnav a[aria-current]{color:var(--ink);font-weight:600;
    box-shadow:inset 0 -2px 0 var(--club)}


  /* ================ THE CLUB HOME'S PHOTO HERO ================ */
  /*
    The reference desaturates the frame to grey; this is the same device with the market's
    own tone: `::before` holds the photo in grayscale, `::after` lays the colour over it
    through `mix-blend-mode:multiply`, which pulls the LIGHT areas of the frame and leaves
    the shadows as shadows. A plain translucent layer over a colour photo would go muddy.
  */
  .chero{position:relative;background:var(--club-dark);color:#fff;isolation:isolate;
    overflow:hidden}
  .chero--photo{min-height:min(74vh,560px);display:flex;align-items:flex-end}
  .chero__bg{position:absolute;inset:0;background-size:cover;background-position:center 28%;
    filter:grayscale(1) contrast(1.08) brightness(.92);z-index:-2}
  .chero--photo::after{content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(105deg,
      color-mix(in srgb, var(--hero-tint, var(--club)) 92%, #000) 0%,
      color-mix(in srgb, var(--hero-tint, var(--club)) 74%, #000) 46%,
      color-mix(in srgb, var(--hero-tint, var(--club)) 52%, #000) 100%);
    mix-blend-mode:multiply}
  /* The text reads on any frame: a dark wash rising from the bottom. */
  .chero--photo::before{content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.22) 42%,
      rgba(0,0,0,0) 72%)}
  .chero__in{position:relative;padding-block:120px 34px}
  .chero--photo .chero__in{padding-block:200px 34px}
  .chero__crest{margin:0 0 18px;width:74px;height:74px;padding:9px;border-radius:9px;
    background:rgba(255,255,255,.9);display:grid;place-items:center}
  .chero__crest img{width:100%;height:auto;display:block}
  .chero__kick{margin:0;font-family:var(--font-mono);font-size:12px;
    letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.82)}
  .chero__h1{margin:10px 0 0;font-family:var(--font-display);font-weight:800;
    font-size:clamp(42px,7.2vw,86px);line-height:1.02;letter-spacing:-.03em;
    text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.35)}
  .chero__facts{margin:22px 0 0;display:flex;flex-wrap:wrap;gap:8px 26px}
  .chero__facts>div{display:flex;gap:6px;align-items:baseline}
  .chero__facts dt{margin:0;font-size:15px;color:rgba(255,255,255,.78)}
  .chero__facts dd{margin:0;font-size:15px;font-weight:700;color:#fff}
  .chero__credit{margin:0;background:var(--ground);padding-block:9px}
  .chero__credit .wrap{display:block;font-family:var(--font-mono);font-size:11px;
    color:var(--ink-3)}
  @media (max-width:640px){
    .chero--photo{min-height:auto}
    .chero--photo .chero__in{padding-block:130px 26px}
  }

  /* The header over the photo: no background of its own, only a wash from the top. */
  .top--over{position:absolute;top:0;left:0;right:0;z-index:5;background:transparent;
    border-bottom:none}
  /* The header lies on the photo, so its legibility depends on the FRAME, not on the
     theme: the duotone is equally dark in all three markets (luminance 0.09–0.12), but a
     brightly lit hall under it stays bright. The scrim is therefore sized against the
     worst photo rather than against the theme colour: it runs taller than the header and
     holds ~0.8 where the text sits, fading out below it. */
  .top--over::before{content:"";position:absolute;left:0;right:0;top:0;height:230%;
    z-index:-1;
    background:linear-gradient(to bottom, rgba(0,0,0,.82) 0%, rgba(0,0,0,.6) 38%,
      rgba(0,0,0,.2) 72%, rgba(0,0,0,0) 100%)}
  .top--over .brand,.top--over nav a{text-shadow:0 1px 12px rgba(0,0,0,.7)}
  /* Over the photo the market accent does NOT work: the hero is flooded with a duotone of
     that same colour, so red on red (the `.com` in the Polish header) and green on green
     disappear. Here everything that is not the primary text is translucent white. */
  .top--over .brand span{color:rgba(255,255,255,.72)}
  .top--over nav a[aria-current]{box-shadow:inset 0 -2px 0 #fff}
  .top--over nav a{color:rgba(255,255,255,.88)}
  .top--over nav a:hover{color:#fff}


  /* ============ THE MOUNTED PROFILE'S HEADER ============ */
  .phero{background:var(--ground);border-bottom:1px solid var(--line);padding-block:20px 0}
  .crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
    align-items:center;gap:0}
  .crumb li{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--ink-3)}
  .crumb li + li::before{content:"/";margin:0 9px;color:var(--line)}
  .crumb a{color:var(--ink-2);text-decoration:none}
  .crumb a:hover{color:var(--club)}
  .phero__grid{display:grid;grid-template-columns:168px minmax(0,1fr);gap:28px;
    align-items:center;padding-block:22px 20px}
  @media (max-width:640px){ .phero__grid{grid-template-columns:1fr;gap:16px} }
  .phero__ph{margin:0;width:168px;height:168px;border-radius:50%;overflow:hidden;
    background:var(--surface-2)}
  .phero__ph img{width:100%;height:100%;object-fit:cover;object-position:top center;
    display:block}
  .phero__head{margin:0;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
  /* The number is set at the name's size but in the club colour, so it is read first and
     the line stays one line instead of a figure stacked above a name. */
  .phero__no{font-family:var(--font-display);font-weight:800;color:var(--club);
    font-size:clamp(38px,5vw,60px);line-height:.9;letter-spacing:-.04em}
  .phero__nm{font-family:var(--font-display);font-weight:700;color:var(--ink);
    font-size:clamp(28px,3.6vw,44px);line-height:1.05;letter-spacing:-.025em}
  .phero__role{margin:8px 0 0;color:var(--ink-2);font-size:17px}
  .phero__facts{margin:18px 0 0;display:inline-grid;
    grid-auto-flow:column;grid-auto-columns:max-content;gap:0;
    background:var(--club-dark);border-radius:6px;overflow:hidden}
  @media (max-width:560px){ .phero__facts{grid-auto-flow:row;width:100%} }
  .phero__facts>div{padding:12px 26px 13px;border-right:1px solid rgba(255,255,255,.1)}
  .phero__facts>div:last-child{border-right:none}
  .phero__facts dt{margin:0 0 3px;font-family:var(--font-mono);font-size:10.5px;
    letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.88)}
  .phero__facts dd{margin:0;font-size:17px;font-weight:600;color:#fff}
  /* The player's section tabs: their own row, the current one underlined in club colour. */
  .ptabs ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 26px}
  .ptabs a{display:inline-block;padding:11px 0;font-size:15.5px;color:var(--ink-2);
    text-decoration:none;border-bottom:2px solid transparent}
  .ptabs a:hover{color:var(--ink)}
  .ptabs a[aria-current]{color:var(--ink);font-weight:600;border-bottom-color:var(--club)}
  .sheet-h1{margin:0;font-family:var(--font-display);font-weight:700;
    font-size:clamp(25px,3.2vw,34px);line-height:1.12;letter-spacing:-.02em}
/* market theme — the bridge: the generator's own blocks (breadcrumbs, «see also», the MVP
   chart, the points split, the news event page, the club partials) drawn in the prototype's
   visual language on its tokens. The prototypes never drew these blocks; the live sites
   need them for SEO and navigation, so they keep the generator's markup and get styled here
   rather than forked (market theme plan, Task 5 ruling). */

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--ground);
  padding:10px 14px;font-family:var(--font-mono);font-size:13px}
.skip:focus{left:12px;top:12px}
.vh, .sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* the home hero: the page's own H1 under the name, the prototype keeps the name large */
.ident__h1{margin:14px 0 0;font-family:var(--font-display);font-size:clamp(17px,2.2vw,21px);
  font-weight:600;line-height:1.3;color:inherit;text-transform:none;letter-spacing:0}
.ident__dek{margin:8px 0 0;font-size:15.5px;line-height:1.5;opacity:.85;max-width:56ch}
.hero .credit{margin-top:6px;font-size:11px;opacity:.7}
.pagehero__dek{margin:10px 0 0;color:var(--ink-2);font-size:17px;line-height:1.5;max-width:62ch}

/* breadcrumbs */
.breadcrumb{margin:18px 0 6px;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3)}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px 0;margin:0;padding:0}
.breadcrumb li+li::before{content:"/";margin:0 8px;color:var(--line)}
.breadcrumb a{color:var(--ink-2);text-decoration:none}
.breadcrumb a:hover{color:var(--club);text-decoration:underline}
.breadcrumb [aria-current]{color:var(--ink)}

/* «see also» — the internal links rail at the bottom of every page */
.see-also{margin:34px 0 8px;padding:18px 0 0;border-top:2px solid var(--ink)}
.see-also__label{margin:0 0 10px;font-family:var(--font-mono);font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3)}
.see-also__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.see-also__list a{display:inline-block;padding:7px 12px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--surface);color:var(--ink);text-decoration:none;
  font-weight:600;font-size:14.5px}
.see-also__list a:hover{border-color:var(--club);color:var(--club)}

.note{margin:10px 0 0;font-size:13px;color:var(--ink-3)}

/* the MVP-per-season chart: columns in the club accent */
.chart{display:flex;align-items:flex-end;gap:8px;height:180px;padding:10px 0 0;
  border-bottom:1px solid var(--line)}
.chart__b{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;height:100%;
  justify-content:flex-end;gap:6px}
.chart__fill{width:100%;max-width:44px;min-height:4px;background:var(--club);border-radius:3px 3px 0 0;
  display:flex;justify-content:center;align-items:flex-start}
.chart__fill b{font-family:var(--font-mono);font-size:11px;color:#fff;padding-top:3px}
.chart__b span{font-family:var(--font-mono);font-size:11px;color:var(--ink-3)}

/* how the points are scored */
.split{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.split__r{display:grid;grid-template-columns:minmax(0,9rem) 1fr auto auto;align-items:center;gap:10px}
.split__r em{font-style:normal;font-weight:600}
.split__t{height:10px;background:var(--surface-2);border-radius:5px;overflow:hidden}
.split__t i{display:block;height:100%;background:var(--club)}
.split__r b{font-family:var(--font-mono)}
.split__r small{font-family:var(--font-mono);color:var(--ink-3)}

/* a news event page: heading → picture → text, then the sources and related news */
.article{max-width:none}
.news-event{margin-top:6px}
.news__date{margin:0 0 10px;font-family:var(--font-mono);font-size:12.5px;color:var(--ink-3);
  letter-spacing:.06em;text-transform:uppercase}
.news-event__figure{margin:0 0 18px}
.news-event__figure img{display:block;width:100%;height:auto;border-radius:var(--radius)}
.news-event__prose{font-size:17.5px;line-height:1.65}
.news-event__sources{margin:26px 0 0;padding:14px 16px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);font-size:14px;color:var(--ink-2)}
.news-event__sources h2{margin:0 0 6px;font-size:14px;text-transform:uppercase;letter-spacing:.06em}
.news-event__sources ul{margin:0;padding-left:18px}
.news-related{margin:30px 0 0}
.news-event__back{margin:22px 0 0;font-weight:700}
.news-event__back a{color:var(--club);text-decoration:none}

@media (max-width:640px){
  .split__r{grid-template-columns:1fr auto;}
  .split__t{grid-column:1/-1}
}

/* ---- club partials ---------------------------------------------------------------- */
.crumbbar .breadcrumb{margin:14px 0 0}

/* the club in numbers (the band under the club hero) */
.numbers{background:var(--surface);border-bottom:1px solid var(--line)}
.numgrid{list-style:none;margin:0 auto;padding:18px 16px;max-width:1180px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px}
.numgrid li{display:flex;flex-direction:column;gap:3px}
.numgrid b{font-family:var(--font-display);font-size:30px;font-weight:800;line-height:1;color:var(--ink)}
.numgrid span{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3)}

/* a block's head with its "all of it →" link (squad snapshot, news preview) */
.snapshot, .newsprev, .doors{margin:30px 0 0}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  border-bottom:2px solid var(--ink);padding-bottom:8px;margin-bottom:14px}
.sec-head h2, .doors>h2{margin:0;font-size:20px;text-transform:uppercase;letter-spacing:.01em}
.more{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--club);text-decoration:none;white-space:nowrap}
.more:hover{text-decoration:underline}

/* the news preview without events: date · host, then the headline */
.nprev{list-style:none;margin:0;padding:0}
.nprev li{display:flex;flex-direction:column;gap:3px;padding:12px 0;border-bottom:1px solid var(--line)}
.nmeta{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3);letter-spacing:.05em}
.ntitle{font-weight:600}
.news-list{list-style:none;margin:0;padding:0}
.news-item{display:flex;flex-wrap:wrap;gap:4px 12px;padding:12px 0;border-bottom:1px solid var(--line)}
.news__src{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3)}

/* the arena's facts */
.arenafacts{margin:0 0 20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.arenafacts__row{background:var(--surface);padding:12px 14px}
.arenafacts dt{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3)}
.arenafacts dd{margin:4px 0 0;font-weight:700}

/* a player's card on a club-site copy: the prototype's `phero` */
.phero__in{display:block}
.phero__id{min-width:0}
.phero__ph--small{max-width:120px}
.phero__ini, .pc-initials{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;
  background:var(--club);color:#fff;font-family:var(--font-display);font-size:42px;font-weight:800;
  border-radius:var(--radius)}
.pc-site, .pc--link{color:var(--club);font-weight:700;text-decoration:none}
.psquad{margin:32px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.psquad__h{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 14px}
/* one scrolling row of faces, the name under each: a plain list here stacked 140px photos */
.psquad__list{display:flex;gap:14px;margin:0;padding:0 0 10px;list-style:none;overflow-x:auto;
  scroll-snap-type:x proximity;scrollbar-width:thin}
.psquad__list li{flex:none;width:96px;scroll-snap-align:start}
.psquad__list a{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--ink);
  text-decoration:none;font-size:13px;line-height:1.25;text-align:center}
.psquad__list img, .psquad__ini{display:flex;align-items:center;justify-content:center;width:80px;height:80px;
  border-radius:50%;object-fit:cover;object-position:50% 15%;background:var(--surface-2);
  border:2px solid var(--line);color:var(--ink);font-family:var(--font-display);font-weight:800}
.psquad__list a:hover img{border-color:var(--club)}
.psquad__list a:hover span{text-decoration:underline}
.psquad__back{display:inline-block;margin-top:14px;font-family:var(--font-mono);font-size:12px;
  color:var(--club);text-decoration:none}
.psquad__back:hover{text-decoration:underline}

/* A page whose rail has nothing in it (no banner feed, no rail banner for the market) gives
   the article the full width: an empty right third reads as a broken layout. */
.sheet:has(> .sheet-rail:not(:has(*))){grid-template-columns:minmax(0,1fr)}
.sheet-rail:not(:has(*)){display:none}

/* ---- the outro band before the footer: the league's other club sites, then the sources ---- */
.outro{margin-top:44px;background:var(--surface);border-top:1px solid var(--line)}
.outro__in{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:34px;padding-top:30px;padding-bottom:34px}
.outro__in > :only-child{grid-column:1/-1}
.sibgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.sibcard{position:relative;display:flex;flex-direction:column;gap:3px;min-height:76px;padding:14px 40px 14px 16px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--ground);color:var(--ink);text-decoration:none;
  transition:border-color .15s ease, transform .15s ease}
.sibcard:hover{border-color:var(--club);transform:translateY(-1px)}
.sibcard__name{font-family:var(--font-display);font-weight:700;font-size:16.5px;line-height:1.2}
.sibcard__city{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.sibcard__go{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--club);font-weight:700}
.outro__lab{margin:4px 0 12px;font-family:var(--font-mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.srclist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.srclist a{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2);text-decoration:none;word-break:break-all}
.srclist a::before{content:"↗";font-size:12px;color:var(--club)}
.srclist a:hover{color:var(--club);text-decoration:underline}
@media (max-width:900px){
  .outro__in{grid-template-columns:1fr;gap:26px}
  .sibgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sibcard{min-height:70px;padding:12px 30px 12px 12px}
  .sibcard__name{font-size:15px}
}
@media (prefers-reduced-motion:reduce){ .sibcard{transition:none} }

.outro__in:not(:has(*)){display:none}
.outro:has(> .outro__in:not(:has(*))){display:none}
.seelist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.seelist a{display:inline-block;padding:8px 13px;border:1px solid var(--line);border-radius:999px;background:var(--ground);
  color:var(--ink);text-decoration:none;font-weight:600;font-size:14px;line-height:1.25}
.seelist a:hover{border-color:var(--club);color:var(--club)}

/* ---- data cards between a player's sections ---- */
.incard{clear:both;margin:26px 0;padding:16px 18px 14px;background:var(--surface);border:1px solid var(--line);
  border-left:4px solid var(--club);border-radius:var(--radius)}
.incard .incard__lab{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 10px;font-family:var(--font-mono);
  font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.incard .incard__lab span{font-family:var(--font-display);font-size:15px;color:var(--club);letter-spacing:0}
.incard__figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.incard__figs div{display:flex;flex-direction:column-reverse;gap:2px}
.incard__figs dd{margin:0;font-family:var(--font-display);font-weight:800;font-size:clamp(24px,6vw,32px);line-height:1;color:var(--ink)}
.incard__figs dd small{font-size:.5em;font-weight:600;color:var(--ink-3)}
.incard__figs dt{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.incard__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.incard .incard__list li{font-size:15.5px;line-height:1.35;color:var(--ink)}
.incard__list b{font-family:var(--font-display);color:var(--club);margin-right:4px}
/* market theme — the phone (2026-10-08, the user: "focus on the phone, a burger menu"). The
   prototypes wrap ten section links onto three lines that eat a quarter of the first
   screen. On a phone the bar is one 56px row — the site's name and a menu button — and the
   sections open as a full-screen sheet. No script: a checkbox drives it, the label is the
   button, so the page stays static and crawlable (every link is in the HTML). */

.navx{position:absolute!important;width:1px;height:1px;opacity:0;pointer-events:none}
.burger{display:none}

@media (max-width:900px){
  .top{position:sticky;top:0;z-index:50}
  .top--over{position:absolute}
  .top__in{min-height:56px;flex-wrap:nowrap;padding-top:0;padding-bottom:0}
  .brand{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .burger{display:flex;flex:none;align-items:center;justify-content:center;width:44px;height:44px;
    margin-right:-10px;cursor:pointer;border-radius:8px}
  .burger i, .burger i::before, .burger i::after{display:block;width:22px;height:2px;border-radius:2px;
    background:#fff;transition:transform .2s ease, opacity .2s ease}
  .burger i{position:relative}
  .burger i::before, .burger i::after{content:"";position:absolute;left:0}
  .burger i::before{top:-7px}
  .burger i::after{top:7px}
  .navx:checked + .burger i{background:transparent}
  .navx:checked + .burger i::before{transform:translateY(7px) rotate(45deg)}
  .navx:checked + .burger i::after{transform:translateY(-7px) rotate(-45deg)}
  .navx:focus-visible + .burger{outline:2px solid var(--on-dark);outline-offset:2px}

  .top nav{position:fixed;left:0;right:0;top:59px;bottom:0;z-index:49;display:flex;flex-direction:column;
    flex-wrap:nowrap;gap:0;padding:6px 20px 40px;overflow-y:auto;background:var(--club-dark);
    visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .2s ease, transform .2s ease, visibility 0s .2s}
  .navx:checked ~ nav{visibility:visible;opacity:1;transform:none;transition:opacity .2s ease, transform .2s ease}
  .top nav a{display:flex;align-items:center;justify-content:space-between;min-height:56px;
    font-family:var(--font-display);font-size:21px;font-weight:700;letter-spacing:.01em;
    color:#fff;text-transform:none;border-bottom:1px solid rgba(255,255,255,.10);box-shadow:none}
  .top nav a::after{content:"→";font-size:18px;color:rgba(255,255,255,.35)}
  .top nav a[aria-current]{color:var(--on-dark);box-shadow:none}
  .top nav a[aria-current]::after{color:var(--on-dark)}
  body:has(.navx:checked){overflow:hidden}

  /* a player's sections as one scrolling row of tabs, not three wrapped lines */
  .ptabs ul{flex-wrap:nowrap;overflow-x:auto;gap:0 22px;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .ptabs ul::-webkit-scrollbar{display:none}
  .ptabs a{white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
  .top nav, .burger i, .burger i::before, .burger i::after{transition:none}
}

@media (max-width:640px){
  /* The figure band: the templates set the column count inline for a desktop row; on a
     phone three to a row, wrapping, so no figure is cut at the screen edge. */
  .band .keys{grid-template-columns:repeat(3,1fr)!important}
  .band .key dd{font-size:clamp(22px,7vw,30px)}
  /* A copy's fact bar: the three facts side by side, not one column beside an empty one. */
  .phero__facts{display:grid;grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
}

/* ---- refinements specific to this theme ---- */
  /* A condensed face reads smaller at the same size, so the headings run larger. */
  .ident__name,.chero__h1{font-size:clamp(46px,8vw,96px);text-transform:uppercase;
    letter-spacing:-.01em}
  .phero__nm,.pagehero__h1,.sheet-h1{text-transform:uppercase;letter-spacing:-.005em}
  .prose h2,.blkhead h2{text-transform:uppercase;letter-spacing:.01em}
  .ident__no,.phero__no{letter-spacing:-.02em}
  /* Square corners and heavier rules: contrast carries the page instead of colour. */
  .pc-in,.door a,.rosa__card,.railblk,.promo,.ncard,.leadfig img,.artfig img,
  .crest,.chero__crest,.card,.phero__facts,.sqchip,.promo__cta{border-radius:0}
  .blkhead{border-bottom-width:2px}
  .top nav a[aria-current]{box-shadow:inset 0 -3px 0 var(--club)}
  table th{border-bottom-width:2px}
/* market theme — the operator banner (appended only when a site can show one). Generated from service-sitegen/prototypes/themes (Anastasiia's MR !1 + the 2026-10-08 banner mockup); edit here, not there. */
/* --- advert (mockup 2026-10-08) -------------------------------------------------
     The OPERATOR's colours, never the theme's: the card is the dark surface of the
     operator's own site, the button its own "register" colour (`ad_palette.py` sets the
     variables per offer and checks every pair >= 4.5:1). A light page: the dark card
     stands out by lightness (15:1) and a 4px band of the brand accent tops it. A dark page:
     the card is as dark as the page (1.1:1), so it gets a 2px frame in the accent. */
  .pick{--pick-bg:#14161B;--pick-ink:#FFFFFF;--pick-muted:#B4BAC4;--pick-accent:#FFFFFF;
    --pick-cta:#FFFFFF;--pick-cta-ink:#14161B;--pick-edge:var(--pick-bg);--pick-hl:var(--pick-ink);
    position:relative;box-sizing:border-box;display:flex;flex-direction:column;
    border:2px solid var(--pick-edge);border-top:4px solid var(--pick-accent);border-radius:10px;
    overflow:hidden;background:var(--pick-bg);color:var(--pick-ink);
    box-shadow:0 16px 34px -16px rgba(10,12,18,.6);font-family:var(--font-body)}
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .pick{--pick-edge:var(--pick-accent-text);border-top-width:2px;
      box-shadow:0 0 28px -8px color-mix(in srgb,var(--pick-accent) 45%,transparent)}
  }
  .pick p{margin:0;color:inherit;max-width:none}
  .pick__body{display:flex;flex-direction:column;gap:10px;padding:20px 20px 16px}
  /* The operator picture under the words: a scrim of the brand surface, heavier where the
     text sits (bottom / left), lighter where the picture can show (top / right). */
  .pick--pic{background-image:
      linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--pick-bg) 10%,transparent) 22%,
        color-mix(in srgb,var(--pick-bg) 72%,transparent) 48%,color-mix(in srgb,var(--pick-bg) 90%,transparent) 100%),
      var(--pick-pic);
    background-size:cover;background-position:center}
  .pick--pic.pick--top .pick__body,.pick--pic.pick--rail .pick__body{padding-top:110px}
  .pick .pick__meta{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .pick .pick__brand{font-family:var(--font-display);font-weight:800;font-size:22px;line-height:1;
    color:var(--pick-ink);letter-spacing:-.01em}
  .pick .pick__tag{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--pick-muted);white-space:nowrap}
  .pick .pick__head{font-family:var(--font-display);font-weight:700;font-size:23px;line-height:1.2;
    text-wrap:balance}
  /* The bonus leads: a small label, then the figure big in the brand colour. */
  .pick .pick__bonus{display:flex;flex-direction:column;gap:2px;font-family:var(--font-display);line-height:1.05}
  .pick .pick__bonus-label{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.12em;
    text-transform:uppercase;color:var(--pick-muted)}
  .pick .pick__bonus-value{font-weight:800;font-size:34px;letter-spacing:-.015em;color:var(--pick-accent-text,var(--pick-ink))}
  .pick .pick__bonus + .pick__head{font-size:18px;font-weight:600;color:var(--pick-ink)}
  /* A light sweep across the button every few seconds: the one moving thing on the card.
     Off for anyone who asked for less motion. */
  .pick__cta{position:relative;overflow:hidden;isolation:isolate}
  .pick__cta::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);
    transform:translateX(-120%);animation:ad-shine 4.5s ease-in-out 1.2s infinite}
  @keyframes ad-shine{0%,62%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
  @media (prefers-reduced-motion:reduce){ .pick__cta::after{animation:none;display:none} }
  .pick__cta, .pick__cta:link, .pick__cta:visited{display:flex;align-items:center;justify-content:center;
    min-height:56px;margin-top:6px;padding:0 20px;border-radius:8px;background:var(--pick-cta);
    color:var(--pick-cta-ink);font-family:var(--font-display);font-weight:800;font-size:19px;
    letter-spacing:.01em;text-decoration:none;text-align:center;
    box-shadow:0 3px 0 rgba(0,0,0,.35)}
  .pick__cta:hover{background:color-mix(in srgb,var(--pick-cta) 86%,#fff);color:var(--pick-cta-ink)}
  .pick__cta:focus-visible{outline:3px solid var(--pick-accent);outline-offset:3px}
  .pick .pick__legal{font-size:11px;line-height:1.4;color:var(--pick-muted)}
  /* A market with a minimum warning share (FR, ANJ: >= 7% of the banner surface) gets a
     larger legal line; the browser pass measures the real share in every slot. */
  .pick[data-min-legal] .pick__legal{font-size:13px;line-height:1.5}
  .pick--bar[data-min-legal] .pick__legal{font-size:10px}
  .vh{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

  /* top: mobile only, the first thing under the header */
  .pick-top{padding-top:16px}
  .pick--top:not(.pick--pic) .pick__body{min-height:228px;justify-content:center}
  /* inline: inside the article; on a desktop a row — picture, words, button */
  .pick--inline{margin:30px 0;clear:both}
  @media (min-width:901px){
    .pick--inline .pick__body{display:grid;grid-template-columns:minmax(0,1fr) auto;
      grid-template-areas:"meta cta" "head cta" "legal legal";column-gap:24px;row-gap:6px;
      padding:20px 24px 14px}
    .pick--inline .pick__meta{grid-area:meta;justify-content:flex-start;flex-wrap:wrap;row-gap:4px}
    .pick--inline .pick__head{grid-area:head}
    .pick--inline .pick__bonus{grid-area:head;align-self:start}
    .pick--inline .pick__bonus + .pick__head{display:none}
    .pick--inline .pick__bonus-value{font-size:28px}
    .pick--inline .pick__cta{grid-area:cta;align-self:center;margin:0;padding:0 28px;white-space:nowrap}
    .pick--inline .pick__legal{grid-area:legal;margin-top:6px}
  }
  /* rail: desktop only, a tall sticky card */
  .pick--rail .pick__body{padding:20px 22px 18px}
  .pick--rail:not(.pick--pic) .pick__body{min-height:300px;justify-content:center}
  .pick--rail .pick__head{font-size:25px}
  /* bar: mobile only, fixed to the bottom, closable; no picture — no room for one */
  .pick--bar{position:fixed;left:8px;right:8px;bottom:8px;z-index:60;overflow:visible;
    border-radius:12px;box-shadow:0 10px 30px -6px rgba(0,0,0,.6)}
  .pick--bar .pick__body{display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"meta cta" "head cta" "legal legal";column-gap:12px;row-gap:3px;
    min-height:84px;box-sizing:border-box;padding:10px 10px 8px 14px}
  .pick--bar .pick__meta{grid-area:meta;justify-content:flex-start;gap:8px}
  .pick--bar .pick__brand{font-size:16px}
  .pick--bar .pick__tag{font-size:9px}
  .pick--bar .pick__head{grid-area:head;font-size:15px;line-height:1.2;display:-webkit-box;
    overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
  .pick--bar .pick__cta{grid-area:cta;min-height:52px;margin:0;padding:0 18px;font-size:17px;white-space:nowrap}
  .pick--bar .pick__legal{grid-area:legal;font-size:9.5px;line-height:1.3}
  .pick--bar .pick__bonus{grid-area:head;flex-direction:row;align-items:baseline;gap:6px}
  .pick--bar .pick__bonus-label{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .pick--bar .pick__bonus-value{font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pick__x-state{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .pick__x{position:absolute;top:-11px;right:-4px;z-index:2;display:flex;align-items:center;
    justify-content:center;width:28px;height:28px;border-radius:50%;background:#fff;color:#111317;
    border:1px solid #111317;font-size:18px;font-weight:700;line-height:1;cursor:pointer;
    box-shadow:0 1px 4px rgba(0,0,0,.35)}
  .pick--bar:has(.pick__x-state:checked){display:none}
  .pick__x-state:focus-visible + .pick__x{outline:3px solid var(--pick-accent);outline-offset:2px}

  @media (max-width:900px){
    .pick--rail{display:none}
    body:has(.pick--bar){padding-bottom:104px}
    body:has(.pick--bar .pick__x-state:checked){padding-bottom:0}
  }
  @media (min-width:901px){ .pick-top, .pick--top, .pick--bar{display:none} }

/* The menu sheet (market-mobile.css) covers the screen: the bottom bar steps aside. */
body:has(.navx:checked) .pick--bar{display:none}