:root{
  --ink:#122A4E; --ink-soft:#3F547A; --red:#E0301E; --paper:#EDEFF2; --paper-2:#E3E7EC;
  --rule:#B9C2CE; --card:#FFFFFF;
}
*{box-sizing:border-box}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:Spectral,Georgia,serif; font-size:17px; line-height:1.55;
  background-image:repeating-linear-gradient(0deg,rgba(18,42,78,.035) 0 1px,transparent 1px 4px)}
.wrap{max-width:1160px; margin:0 auto; padding:0 30px}
a{color:inherit}
.mono{font-family:"Roboto Mono",monospace}

/* masthead */
.masthead{border-bottom:3px solid var(--ink); padding:24px 0 14px; display:grid;
  grid-template-columns:auto 1fr auto; align-items:end; gap:22px}
.masthead .ed{font-family:"Roboto Mono",monospace; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft)}
.masthead h1{font-family:"Big Shoulders Display",sans-serif; font-weight:800; font-size:clamp(36px,6.6vw,82px);
  line-height:.82; margin:0; text-align:center; letter-spacing:-.005em}
.masthead h1 span{display:block; font-size:.28em; letter-spacing:.34em; color:var(--red); font-weight:700; margin-bottom:8px}
.rule-thin{border-bottom:1px solid var(--ink); margin-top:6px}

/* hero: the year, the crest, the pitch */
.hero{display:grid; grid-template-columns:auto 1fr auto; gap:44px; align-items:center;
  padding:38px 0 34px; border-bottom:3px double var(--ink)}
.year{position:relative; font-family:"Big Shoulders Display",sans-serif; font-weight:800;
  font-size:clamp(110px,17vw,214px); line-height:.74; letter-spacing:-.02em}
.year i{font-style:normal; color:var(--red)}
.year::after{content:""; position:absolute; left:0; right:0; bottom:-16px; height:7px; background:var(--red);
  transform-origin:left; animation:draw .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes draw{from{transform:scaleX(0)}}
.year .cap{position:absolute; left:0; bottom:-42px; font-family:"Roboto Mono",monospace; font-size:11px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft); font-weight:400}
.hero .txt h2{font-family:"Big Shoulders Display",sans-serif; font-weight:700; font-size:clamp(26px,3.4vw,40px);
  line-height:1; margin:0 0 14px; max-width:20ch}
.hero .txt p{margin:0 0 22px; color:var(--ink-soft); max-width:46ch}
.btn{display:inline-block; font-family:"Roboto Mono",monospace; font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; border:1.5px solid var(--ink); padding:12px 20px; text-decoration:none; transition:.18s}
.btn:hover,.btn:focus-visible{background:var(--ink); color:var(--paper); outline:none}
.btn.solid{background:var(--red); border-color:var(--red); color:#fff; margin-right:8px}
.btn.solid:hover{background:var(--ink); border-color:var(--ink)}
.crest{width:clamp(150px,15vw,196px); display:block; animation:stamp .7s cubic-bezier(.2,.9,.25,1.2) both}
@keyframes stamp{from{transform:scale(1.2) rotate(-4deg); opacity:0}}

/* placar geral do acervo */
.totais-rot{font-family:"Roboto Mono",monospace; font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--red); padding:16px 0 8px}
.totais{display:grid; grid-template-columns:150px repeat(5,1fr); border-top:1px solid var(--ink);
  border-bottom:1px solid var(--rule)}
.totais > div{padding:10px 6px; border-bottom:1px solid var(--rule); text-align:center}
.totais > div:nth-child(6n+1){text-align:left; font-family:"Roboto Mono",monospace; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); padding-left:2px}
.totais .cab{font-family:"Roboto Mono",monospace; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft); padding:8px 6px}
.totais b{font-family:"Big Shoulders Display",sans-serif; font-weight:800; font-size:30px; line-height:1}
.totais .v b{color:#1B7A3E} .totais .d b{color:var(--red)}
.totais .soma > div{border-bottom:0; background:rgba(18,42,78,.05)}
.totais .soma b{font-size:34px}

/* the squares — one per season */
.sechead{display:flex; align-items:baseline; gap:16px; margin:40px 0 18px}
.sechead h3{font-family:"Big Shoulders Display",sans-serif; font-weight:800; font-size:28px;
  text-transform:uppercase; letter-spacing:.02em; margin:0}
.sechead span{font-family:"Roboto Mono",monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft)}
.seasons{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.sq{background:var(--card); border:1px solid var(--rule); text-decoration:none; color:var(--ink);
  padding:16px 18px 18px; display:block; position:relative; transition:.18s;
  animation:rise .55s cubic-bezier(.2,.8,.2,1) both}
.sq:nth-child(1){animation-delay:.02s}.sq:nth-child(2){animation-delay:.05s}.sq:nth-child(3){animation-delay:.08s}
.sq:nth-child(4){animation-delay:.11s}.sq:nth-child(5){animation-delay:.14s}.sq:nth-child(6){animation-delay:.17s}
.sq:nth-child(7){animation-delay:.2s}.sq:nth-child(8){animation-delay:.23s}.sq:nth-child(9){animation-delay:.26s}
.sq:nth-child(10){animation-delay:.29s}.sq:nth-child(11){animation-delay:.32s}.sq:nth-child(12){animation-delay:.35s}
.sq:nth-child(13){animation-delay:.38s}
@keyframes rise{from{transform:translateY(14px); opacity:0}}
.sq:hover,.sq:focus-visible{border-color:var(--red); transform:translateY(-4px); box-shadow:0 14px 26px rgba(18,42,78,.14); outline:none}
.sq .y{font-family:"Big Shoulders Display",sans-serif; font-weight:800; font-size:46px; line-height:.86; letter-spacing:-.01em}
.sq .y i{font-style:normal; color:var(--red)}
.sq ul{list-style:none; margin:10px 0 0; padding:0; font-size:14.5px; color:var(--ink-soft); min-height:96px}
.sq li{padding:3px 0}
.sq li b{color:var(--ink); font-weight:600}
.sq.titulo li b{color:#fff}

/* Chile 2016 — the one season that isn't a season */
.chile{display:block; text-decoration:none; margin-top:16px; padding:26px 28px; color:var(--paper);
  background:var(--ink); border:1px solid var(--ink); position:relative; overflow:hidden; transition:.18s}
.chile::before{content:""; position:absolute; left:0; top:0; bottom:0; width:8px; background:var(--red)}
.chile:hover,.chile:focus-visible{transform:translateY(-3px); box-shadow:0 16px 30px rgba(18,42,78,.22); outline:none}
.chile .tag{font-family:"Roboto Mono",monospace; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--red)}
.chile h3{font-family:"Big Shoulders Display",sans-serif; font-weight:800; font-size:34px; text-transform:uppercase;
  margin:8px 0 10px; color:#fff}
.chile p{margin:0; max-width:78ch; color:#C6D2E4; font-size:16px}
.chile .nums{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:20px; padding-top:18px;
  border-top:1px solid rgba(255,255,255,.22)}
.chile .nums b{display:block; font-family:"Big Shoulders Display",sans-serif; font-weight:800; font-size:34px; line-height:1; color:#fff}
.chile .nums span{font-family:"Roboto Mono",monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#9FB1CC}
.sq .mark{margin-top:10px; padding-top:9px; border-top:1px solid var(--rule);
  font-family:"Roboto Mono",monospace; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft)}
.sq.titulo{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.sq.titulo ul{color:#C6D2E4} .sq.titulo .mark{color:#fff; border-color:rgba(255,255,255,.25)}
.sq.titulo .y i{color:#fff}
.sq.titulo::after{content:attr(data-trofeus); position:absolute; top:12px; right:14px; font-size:16px; letter-spacing:-2px}

/* record pages */
.book{display:grid; grid-template-columns:1.2fr 1fr; gap:0; margin-top:44px;
  border-top:3px double var(--ink); border-bottom:1px solid var(--rule)}
.book > section{padding:42px 0}
.book > section:first-child{padding-right:44px; border-right:1px solid var(--rule)}
.book > section:last-child{padding-left:44px}
h4{font-family:"Big Shoulders Display",sans-serif; font-weight:800; font-size:26px; text-transform:uppercase; margin:0 0 4px}
.h4sub{font-family:"Roboto Mono",monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--red); margin:0 0 22px; padding-bottom:10px; border-bottom:1px solid var(--ink)}
table{width:100%; border-collapse:collapse}
th{font-family:"Roboto Mono",monospace; font-weight:500; font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-soft); text-align:left; padding-bottom:8px}
th:last-child,td:last-child{text-align:right}
td{padding:9px 0; border-bottom:1px solid var(--rule); font-size:18px}
tbody tr:hover td{background:rgba(224,48,30,.06)}
td.pos{font-family:"Big Shoulders Display",sans-serif; font-weight:800; font-size:26px; width:54px; color:var(--rule)}
tbody tr:nth-child(-n+3) td.pos{color:var(--red)}
td.g{font-family:"Big Shoulders Display",sans-serif; font-weight:800; font-size:24px}

.ficha{border:1.5px solid var(--ink); background:var(--paper-2); margin-bottom:26px}
.ficha .head{display:flex; justify-content:space-between; align-items:center; background:var(--ink); color:var(--paper);
  padding:10px 16px; font-family:"Roboto Mono",monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase}
.ficha .placar{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; text-align:center; padding:24px 16px}
.ficha .placar b{font-family:"Big Shoulders Display",sans-serif; font-weight:700; font-size:24px; text-transform:uppercase}
.ficha .placar .n{font-family:"Big Shoulders Display",sans-serif; font-weight:800; font-size:54px; line-height:.9}
.ficha .placar .n i{font-family:Spectral,serif; font-style:normal; color:var(--red); font-size:24px; margin:0 8px; vertical-align:middle}
.ficha dl{margin:0; padding:0 16px 18px; display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:15px}
.ficha dt{font-family:"Roboto Mono",monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); padding-top:4px}
.ficha dd{margin:0}
.index a{display:flex; justify-content:space-between; gap:10px; text-decoration:none; padding:8px 0; border-bottom:1px dotted var(--rule)}
.index a b{font-weight:600}
.index a span{font-family:"Roboto Mono",monospace; font-size:11px; color:var(--ink-soft)}
.index a:hover b,.index a:focus-visible b{color:var(--red)}

footer{display:flex; align-items:center; gap:18px; padding:28px 0 56px;
  font-family:"Roboto Mono",monospace; font-size:11px; letter-spacing:.14em; color:var(--ink-soft)}
footer img{height:36px}

@media(max-width:1000px){.seasons{grid-template-columns:repeat(2,1fr)} .chile .nums{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){
  .masthead,.hero,.book{grid-template-columns:1fr}
  .hero{gap:26px; text-align:left}
  .book > section:first-child{border-right:0; padding-right:0; border-bottom:1px solid var(--rule)}
  .book > section:last-child{padding-left:0}
  .crest{margin:0 auto}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ---- paginas geradas ---- */
.masthead h1 a{text-decoration:none; color:inherit}
.menu{display:flex; flex-wrap:wrap; gap:6px; padding:14px 0 4px}
.menu a{font-family:"Roboto Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-soft); border:1px solid var(--rule); padding:7px 12px}
.menu a:hover,.menu a:focus-visible{border-color:var(--red); color:var(--red); outline:none}

.cabtemp{display:grid; grid-template-columns:auto 1fr; gap:38px; align-items:center;
  padding:26px 0 24px; border-bottom:3px double var(--ink)}
.year.peq{font-size:clamp(72px,11vw,132px)}
.year.peq::after{height:5px; bottom:-10px}
.destaques{list-style:none; margin:0; padding:0; font-size:17px}
.destaques li{padding:3px 0; border-bottom:1px dotted var(--rule)}
.resumoano{font-family:"Roboto Mono",monospace; font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--red); margin:14px 0 0}

table.jogos{width:100%; border-collapse:collapse; margin-bottom:26px}
table.jogos th{font-family:"Roboto Mono",monospace; font-weight:500; font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft); text-align:left; padding:0 8px 8px}
table.jogos td{padding:9px 8px; border-bottom:1px solid var(--rule); font-size:16px}
table.jogos td.num{font-family:"Roboto Mono",monospace; font-size:12px; color:var(--ink-soft); width:52px}
table.jogos td.dt{font-family:"Roboto Mono",monospace; font-size:12px; color:var(--ink-soft); text-align:right; width:104px}
table.jogos td.pl{white-space:nowrap; width:170px}
table.jogos td.pl b{font-family:"Big Shoulders Display",sans-serif; font-weight:800; font-size:22px}
table.jogos td.pl i{font-style:normal; color:var(--red); margin:0 7px}
table.jogos td.pl small{font-family:"Roboto Mono",monospace; font-size:9.5px; color:var(--ink-soft); letter-spacing:.1em}
table.jogos tr.v td.num{box-shadow:inset 3px 0 0 #1B7A3E}
table.jogos tr.d td.num{box-shadow:inset 3px 0 0 var(--red)}
table.jogos tr.e td.num{box-shadow:inset 3px 0 0 var(--rule)}
table.jogos tbody tr:hover td{background:rgba(224,48,30,.05)}

table.rank{width:100%; border-collapse:collapse; margin-bottom:8px}
table.rank th{font-family:"Roboto Mono",monospace; font-weight:500; font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft); text-align:left; padding-bottom:8px}
table.rank td{padding:9px 0; border-bottom:1px solid var(--rule); font-size:17px}
table.rank td.pos{font-family:"Big Shoulders Display",sans-serif; font-weight:800; font-size:24px;
  width:54px; color:var(--rule)}
table.rank tr:nth-child(-n+3) td.pos{color:var(--red)}
table.rank td.g{font-family:"Big Shoulders Display",sans-serif; font-weight:800; font-size:20px; text-align:right}

.obs{font-size:15px; color:var(--ink-soft); border-left:4px solid var(--red); padding:8px 0 8px 14px; margin:22px 0 0}

@media(max-width:900px){
  .cabtemp{grid-template-columns:1fr; gap:14px}
  table.jogos td.dt{display:none}
}