/* ============================================================
   DESIGN SYSTEM
   Light Material 3 Expressive. Two brand poles taken from the
   national flags, blended across a central face-off seam.

   Spain     : crimson AA151B, gold F1BF00
   Argentina : celeste 74ACDF, sun gold F6B40E
   ============================================================ */

:root{
  /* brand poles */
  --spa-40:#8E1116; --spa-50:#AA151B; --spa-60:#C93A34; --spa-80:#FFDAD5; --spa-95:#FFF0EE;
  --spa-gold:#F1BF00;
  --arg-40:#1E6FA8; --arg-50:#2E8BC9; --arg-60:#74ACDF; --arg-80:#CFE5F7; --arg-95:#EDF5FC;
  --arg-gold:#F6B40E;

  /* neutral surfaces */
  --s-0:#FFFFFF;
  --s-1:#FBF9FA;
  --s-2:#F5F1F3;
  --s-3:#EFEAEC;
  --s-4:#E8E2E5;
  --outline:#D9D2D6;
  --outline-soft:rgba(28,20,24,.08);

  --on-s:#1C1418;
  --on-s-var:#584E52;
  --on-s-dim:#8A7E84;

  --ok:#1E7A5A; --warn:#9A6400; --bad:#B3261E;

  /* expressive type scale */
  --d-l:clamp(40px,7vw,72px);
  --d-m:clamp(32px,5vw,52px);
  --h-l:clamp(26px,3.6vw,36px);
  --h-m:22px; --h-s:18px;
  --t-l:16px; --t-m:14.5px; --t-s:13px; --t-xs:11.5px;

  /* shape */
  --r-xs:8px; --r-s:14px; --r-m:20px; --r-l:28px; --r-xl:36px; --r-full:999px;

  /* elevation, soft and warm rather than grey */
  --e1:0 1px 2px rgba(28,20,24,.05),0 1px 3px rgba(28,20,24,.04);
  --e2:0 2px 6px rgba(28,20,24,.06),0 6px 16px rgba(28,20,24,.05);
  --e3:0 8px 24px rgba(28,20,24,.08),0 2px 8px rgba(28,20,24,.05);

  /* expressive spring motion */
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.2,0,0,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--s-1);color:var(--on-s);
  font:var(--t-l)/1.65 "Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"cv11","ss01";
}
h1,h2,h3,h4,h5{margin:0;line-height:1.15;letter-spacing:-.022em;font-weight:700}
p{margin:0 0 14px}
a{color:var(--arg-40)}
.num{font-variant-numeric:tabular-nums;
  font-family:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace}
.dim{color:var(--on-s-dim)}
.var{color:var(--on-s-var)}
.cspa{color:var(--spa-50)} .carg{color:var(--arg-40)}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}

/* ============ face-off hero ============ */
.hero{position:relative;overflow:hidden;isolation:isolate;
  background:var(--s-0);border-bottom:1px solid var(--outline-soft)}
.hero-bg{position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(120% 100% at 0% 30%, rgba(170,21,27,.16) 0%, rgba(170,21,27,0) 58%),
    radial-gradient(120% 100% at 100% 30%, rgba(46,139,201,.18) 0%, rgba(46,139,201,0) 58%),
    radial-gradient(90% 70% at 8% 0%, rgba(241,191,0,.14) 0%, rgba(241,191,0,0) 55%),
    radial-gradient(90% 70% at 96% 6%, rgba(246,180,14,.14) 0%, rgba(246,180,14,0) 55%),
    linear-gradient(180deg,#fff 0%, var(--s-1) 100%);}
/* the seam where the two identities meet */
.hero-seam{position:absolute;left:50%;top:0;bottom:0;width:46vw;transform:translateX(-50%);z-index:-1;
  background:linear-gradient(90deg,
    rgba(170,21,27,.10) 0%, rgba(241,191,0,.10) 34%,
    rgba(255,255,255,.55) 50%,
    rgba(246,180,14,.10) 66%, rgba(46,139,201,.12) 100%);
  filter:blur(46px);opacity:.95}
.hero-inner{position:relative;padding:52px 0 40px}

.paper-badge{display:inline-flex;align-items:center;gap:9px;
  padding:7px 15px;border-radius:var(--r-full);
  background:rgba(255,255,255,.8);border:1px solid var(--outline);
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--on-s-var);backdrop-filter:blur(8px);box-shadow:var(--e1)}
.paper-badge i{width:7px;height:7px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 4px rgba(30,122,90,.14)}

h1.title{font-size:var(--d-l);font-weight:800;letter-spacing:-.035em;margin:20px 0 6px}
.title .v{font-weight:300;color:var(--on-s-dim);font-size:.5em;vertical-align:.28em;
  margin:0 .2em;letter-spacing:0}
.g-spa{background:linear-gradient(135deg,var(--spa-50),var(--spa-gold));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.g-arg{background:linear-gradient(135deg,var(--arg-60),var(--arg-40));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.byline{color:var(--on-s-var);font-size:var(--t-m);margin-top:12px}
.byline b{color:var(--on-s)}
.meta-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.chip{padding:6px 13px;border-radius:var(--r-full);background:var(--s-2);
  border:1px solid var(--outline-soft);font-size:var(--t-xs);font-weight:600;color:var(--on-s-var)}
.chip.hot{background:linear-gradient(135deg,rgba(241,191,0,.2),rgba(246,180,14,.14));
  border-color:rgba(241,191,0,.4);color:#7A5A00}

/* headline split gauge */
.gauge{margin-top:34px;background:var(--s-0);border-radius:var(--r-xl);padding:26px;
  box-shadow:var(--e3);border:1px solid var(--outline-soft)}
.gauge-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px}
.gside{text-align:center}
.gside .gname{font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;font-weight:800}
.gside .gval{font-size:var(--d-m);font-weight:800;letter-spacing:-.04em;line-height:1;margin-top:2px}
.gmid{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-s-dim);font-weight:700;text-align:center;line-height:1.5}
.gbar{margin-top:20px;height:22px;border-radius:var(--r-full);overflow:hidden;display:flex;
  background:var(--s-3);box-shadow:inset 0 1px 3px rgba(28,20,24,.08)}
.gbar i{display:block;height:100%;transition:width 1.1s var(--spring)}
.gbar .isp{background:linear-gradient(90deg,var(--spa-40),var(--spa-50) 60%,var(--spa-60));
  border-radius:var(--r-full) 0 0 var(--r-full)}
.gbar .iar{background:linear-gradient(90deg,var(--arg-60),var(--arg-50) 40%,var(--arg-40));
  border-radius:0 var(--r-full) var(--r-full) 0}
.gnote{margin-top:12px;font-size:var(--t-s);color:var(--on-s-dim);text-align:center}

/* ============ nav ============ */
nav.tabs{position:sticky;top:0;z-index:60;background:rgba(251,249,250,.86);
  backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid var(--outline-soft)}
.tabrow{max-width:1240px;margin:0 auto;padding:0 24px;display:flex;gap:4px;overflow-x:auto;
  scrollbar-width:none}
.tabrow::-webkit-scrollbar{display:none}
.tab{position:relative;padding:15px 15px;background:none;border:0;cursor:pointer;
  font:700 var(--t-m)/1 inherit;color:var(--on-s-dim);white-space:nowrap;
  transition:color .2s var(--ease)}
.tab:hover{color:var(--on-s)}
.tab.on{color:var(--on-s)}
.tab.on::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:3px;
  border-radius:3px 3px 0 0;
  background:linear-gradient(90deg,var(--spa-50),var(--spa-gold) 45%,var(--arg-60) 55%,var(--arg-40))}

.panel{display:none;padding:34px 0 90px;animation:rise .5s var(--ease)}
.panel.on{display:block}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ============ cards ============ */
.card{background:var(--s-0);border:1px solid var(--outline-soft);border-radius:var(--r-l);
  padding:26px;margin-bottom:20px;box-shadow:var(--e1);
  transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.card:hover{box-shadow:var(--e2)}
.card.tonal-spa{background:linear-gradient(160deg,var(--spa-95),var(--s-0) 62%);
  border-color:rgba(170,21,27,.14)}
.card.tonal-arg{background:linear-gradient(160deg,var(--arg-95),var(--s-0) 62%);
  border-color:rgba(46,139,201,.16)}
.card.tonal-mix{background:
  linear-gradient(115deg,var(--spa-95) 0%, #fff 46%, #fff 54%, var(--arg-95) 100%)}
.card h3{font-size:var(--h-m);margin-bottom:5px}
.card h4{font-size:var(--h-s);margin-bottom:5px}
.lead{color:var(--on-s-var);font-size:var(--t-m);margin:6px 0 20px}
.eyebrow{font-size:var(--t-xs);letter-spacing:.15em;text-transform:uppercase;
  font-weight:800;color:var(--on-s-dim);margin-bottom:9px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.grid2,.grid3{grid-template-columns:1fr}}

/* section numbering, research paper style */
.secnum{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:var(--r-s);
  background:linear-gradient(135deg,var(--spa-50),var(--arg-40));
  color:#fff;font-weight:800;font-size:var(--t-s);margin-right:11px;flex:none;
  box-shadow:var(--e1)}
.sechead{display:flex;align-items:center;margin-bottom:6px}

/* ============ stat tiles ============ */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:13px}
.tile{background:var(--s-0);border:1px solid var(--outline-soft);border-radius:var(--r-m);
  padding:17px;box-shadow:var(--e1);transition:transform .3s var(--spring)}
.tile:hover{transform:translateY(-3px)}
.tile .tv{font-size:29px;font-weight:800;letter-spacing:-.03em;line-height:1.05}
.tile .tl{font-size:var(--t-xs);color:var(--on-s-dim);margin-top:5px;font-weight:600;
  letter-spacing:.03em}
.tile.spa{background:linear-gradient(150deg,var(--spa-95),#fff)}
.tile.arg{background:linear-gradient(150deg,var(--arg-95),#fff)}

/* ============ tables ============ */
.tbl{width:100%;border-collapse:collapse;font-size:var(--t-m)}
.tbl th{text-align:left;padding:11px 12px;font-size:var(--t-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-s-dim);font-weight:800;
  border-bottom:2px solid var(--outline)}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--outline-soft)}
.tbl tbody tr{transition:background .15s var(--ease)}
.tbl tbody tr:hover{background:var(--s-2)}
.tbl td.num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums;
  font-family:"JetBrains Mono",ui-monospace,monospace}
.tbl tr.hspa td{background:linear-gradient(90deg,var(--spa-95),transparent 70%)}
.tbl tr.harg td{background:linear-gradient(90deg,var(--arg-95),transparent 70%)}
.tbl tr.ens td{background:linear-gradient(90deg,rgba(241,191,0,.16),rgba(246,180,14,.08));
  font-weight:800}
.scroll{max-height:560px;overflow:auto;border-radius:var(--r-m);border:1px solid var(--outline-soft)}
.scroll::-webkit-scrollbar{width:9px;height:9px}
.scroll::-webkit-scrollbar-thumb{background:var(--outline);border-radius:9px}

/* ============ glossary ============ */
.gterm{display:inline;padding:0 1px;background:none;border:0;cursor:help;
  font:inherit;color:inherit;
  border-bottom:1.5px dotted var(--arg-50);
  transition:background .2s var(--ease)}
.gterm:hover{background:rgba(46,139,201,.12);border-radius:3px}
#gpop{position:fixed;z-index:200;max-width:370px;background:var(--s-0);
  border:1px solid var(--outline);border-radius:var(--r-m);padding:17px 19px;
  box-shadow:var(--e3);display:none;animation:pop .26s var(--spring)}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(6px)}to{opacity:1;transform:none}}
#gpop .gp-cat{font-size:var(--t-xs);letter-spacing:.13em;text-transform:uppercase;
  font-weight:800;color:var(--arg-40)}
#gpop .gp-term{font-size:var(--h-s);font-weight:800;margin:5px 0 2px}
#gpop .gp-short{font-size:var(--t-m);color:var(--on-s);font-weight:600;margin-bottom:8px}
#gpop .gp-long{font-size:var(--t-s);color:var(--on-s-var);line-height:1.6}
#gpop .gp-close{position:absolute;top:11px;right:13px;background:none;border:0;
  cursor:pointer;color:var(--on-s-dim);font-size:17px;line-height:1}

.glosgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:15px}
.glositem{background:var(--s-0);border:1px solid var(--outline-soft);border-radius:var(--r-m);
  padding:17px;box-shadow:var(--e1)}
.glositem .gi-t{font-weight:800;font-size:var(--t-l);margin-bottom:3px}
.glositem .gi-s{font-size:var(--t-s);color:var(--arg-40);font-weight:700;margin-bottom:7px}
.glositem .gi-l{font-size:var(--t-s);color:var(--on-s-var);line-height:1.6}
.glosfilter{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px}

/* ============ buttons ============ */
.btn{padding:11px 19px;border-radius:var(--r-full);border:1px solid var(--outline);
  background:var(--s-0);color:var(--on-s);cursor:pointer;font:700 var(--t-m)/1 inherit;
  transition:transform .22s var(--spring),box-shadow .22s var(--ease),background .2s}
.btn:hover{background:var(--s-2);transform:translateY(-1px);box-shadow:var(--e1)}
.btn:active{transform:translateY(0) scale(.97)}
.btn.pri{background:linear-gradient(135deg,var(--spa-50),var(--spa-60));color:#fff;border:0;
  box-shadow:var(--e2)}
.btn.pri:hover{filter:brightness(1.07)}
.btn.sec{background:linear-gradient(135deg,var(--arg-50),var(--arg-40));color:#fff;border:0;
  box-shadow:var(--e2)}
.pill{padding:7px 15px;border-radius:var(--r-full);border:1px solid var(--outline);
  background:var(--s-0);color:var(--on-s-var);cursor:pointer;font:700 var(--t-s)/1 inherit;
  transition:all .22s var(--ease)}
.pill:hover{background:var(--s-2)}
.pill.on{background:linear-gradient(135deg,var(--spa-50),var(--arg-40));color:#fff;border-color:transparent;
  box-shadow:var(--e1)}

/* ============ 3D sim ============ */
.stage{position:relative;border-radius:var(--r-l);overflow:hidden;
  box-shadow:var(--e3);border:1px solid var(--outline-soft);background:#0d1a12}
#pitch{display:block;width:100%;cursor:grab;touch-action:none}
#pitch:active{cursor:grabbing}
.scorebug{position:absolute;top:16px;left:50%;transform:translateX(-50%);
  display:flex;align-items:stretch;border-radius:var(--r-full);overflow:hidden;
  box-shadow:var(--e3);font-weight:800;backdrop-filter:blur(10px)}
.sb-side{padding:9px 17px;font-size:var(--t-s);letter-spacing:.1em;color:#fff;display:flex;
  align-items:center;gap:9px}
.sb-side.sp{background:linear-gradient(135deg,rgba(142,17,22,.95),rgba(170,21,27,.95))}
.sb-side.ar{background:linear-gradient(135deg,rgba(46,139,201,.95),rgba(30,111,168,.95))}
.sb-side .n{font-size:20px}
.sb-clock{padding:9px 15px;background:rgba(255,255,255,.94);color:var(--on-s);
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:var(--t-m);
  display:flex;align-items:center}
.goalflash{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;opacity:0;font-size:clamp(44px,9vw,104px);font-weight:900;
  letter-spacing:-.04em;color:#fff;text-shadow:0 6px 40px rgba(0,0,0,.5)}
.goalflash.on{animation:flash 1.5s var(--ease)}
@keyframes flash{
  0%{opacity:0;transform:scale(.7)}
  16%{opacity:1;transform:scale(1.06)}
  70%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.03)}}
.simctl{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:16px}
.feed-item{display:grid;grid-template-columns:52px 1fr auto;gap:11px;align-items:center;
  padding:11px 13px;border-radius:var(--r-s);margin-bottom:7px;
  animation:slidein .4s var(--spring)}
@keyframes slidein{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.feed-item.sp{background:linear-gradient(90deg,var(--spa-95),transparent)}
.feed-item.ar{background:linear-gradient(90deg,var(--arg-95),transparent)}
.feed-item .fm{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:800;
  color:var(--on-s-dim);font-size:var(--t-s)}
.feed-item .fp{font-weight:700}
.feed-item .fsc{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:800}
.kick{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;margin:4px 4px 0 0;
  border-radius:var(--r-full);font-size:var(--t-s);font-weight:700;border:1px solid var(--outline-soft)}
.kick.sp{background:var(--spa-95)} .kick.ar{background:var(--arg-95)}
.kick.miss{opacity:.5}

/* ============ charts and viz ============ */
canvas.chart{width:100%;display:block}
.heat{border-collapse:separate;border-spacing:4px;margin:0 auto}
.heat th{color:var(--on-s-dim);font-size:var(--t-xs);padding:3px 7px;font-weight:800}
.heat td{width:56px;height:42px;text-align:center;border-radius:var(--r-xs);
  font-variant-numeric:tabular-nums;font-weight:700;font-size:var(--t-s);
  transition:transform .2s var(--spring)}
.heat td:hover{transform:scale(1.12);position:relative;z-index:2;box-shadow:var(--e2)}

.modelbar{display:grid;grid-template-columns:180px 1fr;gap:14px;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--outline-soft)}
.mbname{font-size:var(--t-s);font-weight:700}
.mbtrack{display:flex;height:26px;border-radius:var(--r-xs);overflow:hidden;background:var(--s-3)}
.mbtrack i{display:flex;align-items:center;justify-content:center;font-size:var(--t-xs);
  font-weight:800;color:#fff;transition:width .9s var(--spring)}
.mbtrack .w{background:linear-gradient(90deg,var(--spa-40),var(--spa-50))}
.mbtrack .d{background:var(--on-s-dim)}
.mbtrack .l{background:linear-gradient(90deg,var(--arg-50),var(--arg-40))}
@media(max-width:700px){.modelbar{grid-template-columns:1fr}}

/* interval plot */
.ival{display:grid;grid-template-columns:150px 1fr 96px;gap:13px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--outline-soft);font-size:var(--t-s)}
.itrack{position:relative;height:12px;background:var(--s-3);border-radius:var(--r-full)}
.ibar{position:absolute;height:100%;border-radius:var(--r-full);
  background:linear-gradient(90deg,var(--spa-50),var(--arg-40));opacity:.32}
.idot{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:#fff;
  border:3px solid var(--spa-50);transform:translate(-50%,-50%);box-shadow:var(--e1)}

/* ============ matches ============ */
.m{display:grid;grid-template-columns:108px 1fr 74px 1fr 118px 86px;gap:12px;align-items:center;
  padding:10px 13px;border-radius:var(--r-s);font-size:var(--t-m);
  transition:background .15s var(--ease)}
.m:hover{background:var(--s-2)}
.m.fin{background:linear-gradient(90deg,var(--spa-95),transparent 40%,transparent 60%,var(--arg-95))}
.m.unplayed{opacity:.55}
.mst{font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--on-s-dim);
  font-weight:700}
.mt{text-align:right}.mt.a{text-align:left}
.mt.w{font-weight:800}
.msc{text-align:center;font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:800;
  background:var(--s-2);border-radius:var(--r-xs);padding:4px 0}
.mx,.md{font-size:var(--t-xs);color:var(--on-s-dim)}
.md{text-align:right}
@media(max-width:860px){
  .m{grid-template-columns:1fr 66px 1fr;gap:7px;font-size:var(--t-s)}
  .mst,.mx,.md{display:none}
}

/* ============ paper apparatus ============ */
.abstract{border-left:4px solid;border-image:linear-gradient(180deg,var(--spa-50),var(--arg-40)) 1;
  padding:4px 0 4px 22px;font-size:var(--t-l);line-height:1.75;color:var(--on-s-var)}
.abstract b{color:var(--on-s)}
.callout{border-radius:var(--r-m);padding:17px 19px;margin:18px 0;font-size:var(--t-m);
  border:1px solid}
.callout.warn{background:#FFF8E6;border-color:rgba(241,191,0,.45);color:#6B4E00}
.callout.info{background:var(--arg-95);border-color:rgba(46,139,201,.3);color:#134B72}
.callout.key{background:linear-gradient(120deg,var(--spa-95),var(--arg-95));
  border-color:var(--outline)}
.eqn{background:var(--s-2);border:1px solid var(--outline-soft);border-radius:var(--r-m);
  padding:17px 19px;margin:14px 0;font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:var(--t-m);overflow-x:auto;line-height:1.8}
.eqn .c{color:var(--on-s-dim)}
ul.clean{margin:10px 0 0;padding-left:20px;color:var(--on-s-var);font-size:var(--t-m)}
ul.clean li{margin:8px 0}
ul.clean b{color:var(--on-s)}
ol.refs{font-size:var(--t-s);color:var(--on-s-var);padding-left:22px}
ol.refs li{margin:8px 0;word-break:break-word}
footer{border-top:1px solid var(--outline);padding:26px 0 60px;
  font-size:var(--t-s);color:var(--on-s-dim)}

.tag{display:inline-block;padding:3px 9px;border-radius:var(--r-full);font-size:var(--t-xs);
  font-weight:800;letter-spacing:.04em}
.tag.ok{background:#E3F5EC;color:var(--ok)}
.tag.warn{background:#FFF3DA;color:var(--warn)}
.tag.bad{background:#FDE9E7;color:var(--bad)}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}