/* ============================================================
   soorena.io — shared design system
   538-inspired "stat sheet": newsroom grotesk + mono labels,
   warm rust accent, restrained editorial layout.
   Built on Web Awesome design tokens so dark mode + theming
   propagate (including into chart axis labels).
   ============================================================ */

:root {
  --maxw: 74rem;
  /* Override Web Awesome font tokens → everything (incl. charts) uses the pairing */
  --wa-font-family-body: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --wa-font-family-heading: "Libre Franklin", -apple-system, BlinkMacSystemFont, sans-serif;
  --wa-font-family-code: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

body {
  margin: 0;
  background-color: var(--wa-color-surface-default);
  color: var(--wa-color-text-normal);
  font-family: var(--wa-font-family-body);
  font-size: var(--wa-font-size-m);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: clamp(var(--wa-space-m), 4vw, var(--wa-space-2xl)); }
.mono { font-family: var(--wa-font-family-code); }
.note { color: var(--wa-color-text-quiet); }
a { color: inherit; }

/* Signature accent bar across the very top */
.toprule { height: 5px; background: var(--wa-color-brand-fill-loud); }

/* ---- Masthead (shared) ---- */
.masthead { border-bottom: 3px solid var(--wa-color-text-normal); padding-block: var(--wa-space-l) var(--wa-space-xs); margin-top: var(--wa-space-l); }
.masthead .row { display: flex; align-items: center; justify-content: space-between; gap: var(--wa-space-m); flex-wrap: wrap; }
.wordmark { font-family: var(--wa-font-family-heading); font-weight: 900; font-size: clamp(1.9rem, 5vw, 2.7rem); letter-spacing: -.04em; line-height: 1; text-decoration: none; color: var(--wa-color-text-normal); display: inline-flex; align-items: center; gap: .12em; }
.wordmark .mk { width: .32em; height: .32em; background: var(--wa-color-brand-fill-loud); border-radius: 2px; display: inline-block; margin-bottom: .12em; }
.masthead .right { display: flex; align-items: center; gap: var(--wa-space-l); }
.masthead .meta { font-family: var(--wa-font-family-code); font-size: var(--wa-font-size-2xs); text-transform: uppercase; letter-spacing: .1em; color: var(--wa-color-text-quiet); text-align: right; line-height: 1.5; }

/* breadcrumb (project pages) */
.crumb { display: flex; align-items: center; gap: .6ch; font-family: var(--wa-font-family-code); font-size: var(--wa-font-size-2xs); text-transform: uppercase; letter-spacing: .1em; color: var(--wa-color-text-quiet); }
.crumb a { text-decoration: none; color: var(--wa-color-text-quiet); transition: color var(--wa-transition-normal) var(--wa-transition-easing); }
.crumb wa-icon { font-size: .8em; }
.crumb a:hover { color: var(--wa-color-brand-fill-loud); }
.crumb .here { color: var(--wa-color-text-normal); }

/* ---- Home hero ---- */
.home-hero { padding-block: clamp(var(--wa-space-2xl), 9vw, 7rem) var(--wa-space-2xl); }
.kicker { font-family: var(--wa-font-family-code); font-size: var(--wa-font-size-2xs); text-transform: uppercase; letter-spacing: .16em; color: var(--wa-color-brand-fill-loud); font-weight: 600; }
.home-hero h1 { font-family: var(--wa-font-family-heading); font-weight: 800; font-size: clamp(2.6rem, 9vw, 5.5rem); line-height: 1; letter-spacing: -.04em; margin: .25em 0 .3em; text-wrap: balance; }
.home-hero h1 .dot { color: var(--wa-color-brand-fill-loud); }
.home-hero .dek { font-size: var(--wa-font-size-l); color: var(--wa-color-text-quiet); max-width: 44ch; margin: 0; text-wrap: pretty; }

/* ---- Section heads ---- */
.section { padding-block: var(--wa-space-2xl); border-top: var(--wa-border-width-s) solid var(--wa-color-surface-border); scroll-margin-top: 1rem; }
.section > .head { display: flex; align-items: center; gap: var(--wa-space-s); margin-bottom: var(--wa-space-l); }
.section > .head .tag { font-family: var(--wa-font-family-code); font-size: var(--wa-font-size-2xs); text-transform: uppercase; letter-spacing: .14em; color: var(--wa-color-brand-fill-loud); white-space: nowrap; font-weight: 600; }
.section > .head .rule { flex: 1; height: 2px; background: var(--wa-color-surface-border); }
.section > .head .count { font-family: var(--wa-font-family-code); font-size: var(--wa-font-size-2xs); color: var(--wa-color-text-quiet); }

/* ---- Project list (home) ---- */
.projects { display: grid; gap: 0; }
.proj { display: grid; grid-template-columns: auto 1fr auto; gap: var(--wa-space-l); align-items: center; padding: var(--wa-space-l) var(--wa-space-xs); border-top: var(--wa-border-width-s) solid var(--wa-color-surface-border); text-decoration: none; color: inherit; transition: background-color var(--wa-transition-normal) var(--wa-transition-easing), padding-inline var(--wa-transition-normal) var(--wa-transition-easing), transform var(--wa-transition-fast) var(--wa-transition-easing); }
.proj:last-child { border-bottom: var(--wa-border-width-s) solid var(--wa-color-surface-border); }
.proj.live:hover, .proj.live:focus-visible { background-color: color-mix(in oklab, var(--wa-color-brand-fill-loud) 6%, transparent); padding-inline-start: var(--wa-space-m); }
.proj.live:hover .pnum, .proj.live:focus-visible .pnum { color: var(--wa-color-brand-fill-loud); }
.proj.live:hover .arrow, .proj.live:focus-visible .arrow { transform: translateX(3px); opacity: 1; }
.proj.live:active { transform: translateY(1px); }
.proj.soon { opacity: .55; cursor: default; }
.proj .pnum { font-family: var(--wa-font-family-code); font-size: var(--wa-font-size-xl); color: var(--wa-color-surface-border); transition: color var(--wa-transition-normal) var(--wa-transition-easing); }
.proj .ptitle { display: flex; align-items: center; gap: .5ch; font-family: var(--wa-font-family-heading); font-weight: 700; font-size: clamp(1.3rem, 3.5vw, 1.9rem); letter-spacing: -.02em; margin: 0; }
.proj .ptitle .arrow { color: var(--wa-color-brand-fill-loud); opacity: .5; transition: transform var(--wa-transition-normal) var(--wa-transition-easing), opacity var(--wa-transition-normal) var(--wa-transition-easing); font-size: .7em; }
.proj .pdesc { color: var(--wa-color-text-quiet); margin: .35em 0 0; font-size: var(--wa-font-size-m); max-width: 58ch; text-wrap: pretty; }
.proj .ptags { font-family: var(--wa-font-family-code); font-size: var(--wa-font-size-2xs); text-transform: uppercase; letter-spacing: .06em; color: var(--wa-color-text-quiet); margin-top: .6em; display: inline-block; }
.proj .pstatus { justify-self: end; }
@media (max-width: 40rem) {
  .proj { grid-template-columns: auto 1fr; }
  .proj .pstatus { grid-column: 2; justify-self: start; margin-top: .4em; }
}

/* ---- Project-page header block ---- */
.proj-head { padding-block: var(--wa-space-xl) var(--wa-space-l); }
.proj-head h1 { font-family: var(--wa-font-family-heading); font-weight: 800; font-size: clamp(2.2rem, 6vw, 3.6rem); letter-spacing: -.03em; margin: .15em 0 .25em; text-wrap: balance; }
.proj-head h1 wa-icon { color: var(--wa-color-brand-fill-loud); font-size: .8em; }
.proj-head .standfirst { color: var(--wa-color-text-quiet); margin: 0; max-width: 64ch; font-size: var(--wa-font-size-l); text-wrap: pretty; }
.meta-row { margin-top: var(--wa-space-m); display: flex; gap: var(--wa-space-s); align-items: center; flex-wrap: wrap; }
.updated { font-family: var(--wa-font-family-code); font-size: var(--wa-font-size-2xs); color: var(--wa-color-text-quiet); }
.tabs-row { margin-bottom: var(--wa-space-s); }
.mt-2xl { margin-top: var(--wa-space-2xl); }
.block h3 wa-badge { font-size: .6em; vertical-align: middle; }
.section wa-callout { margin-top: var(--wa-space-xl); }

/* KPI strip */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--wa-space-m); margin-top: var(--wa-space-xl); }
.kpi { border-top: 2px solid var(--wa-color-brand-fill-loud); padding-top: var(--wa-space-s); }
.kpi .n { font-family: var(--wa-font-family-heading); font-weight: 800; font-size: var(--wa-font-size-3xl); line-height: 1; letter-spacing: -.02em; }
.kpi .l { font-family: var(--wa-font-family-code); font-size: var(--wa-font-size-2xs); text-transform: uppercase; letter-spacing: .08em; color: var(--wa-color-text-quiet); margin-top: .5em; }

/* ---- Cards / chart blocks ---- */
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wa-space-xl); }
.cols-2 { display: grid; grid-template-columns: 3fr 2fr; gap: var(--wa-space-2xl); }
@media (max-width: 55rem) { .cols-3, .cols-2 { grid-template-columns: 1fr; gap: var(--wa-space-xl); } }
.block h3 { font-family: var(--wa-font-family-heading); font-weight: 700; font-size: var(--wa-font-size-m); margin: 0 0 .1em; }
.block .sub { font-family: var(--wa-font-family-code); font-size: var(--wa-font-size-2xs); color: var(--wa-color-text-quiet); margin: 0 0 var(--wa-space-s); padding-bottom: .5em; border-bottom: 2px solid var(--wa-color-surface-border); text-transform: uppercase; letter-spacing: .06em; }
.srcline { font-family: var(--wa-font-family-code); font-size: .65rem; text-transform: uppercase; letter-spacing: .06em; color: var(--wa-color-text-quiet); margin-top: var(--wa-space-s); opacity: .85; }
wa-bar-chart, wa-line-chart, wa-doughnut-chart, wa-radar-chart, wa-polar-area-chart, wa-scatter-chart { display: block; }
#goals-chart { --fill-color-1: color-mix(in srgb, var(--wa-color-orange-50) 80%, transparent); --border-color-1: var(--wa-color-orange-60); }

/* ---- Standings table ---- */
.tablewrap { overflow-x: auto; }
table.std { width: 100%; border-collapse: collapse; font-size: var(--wa-font-size-s); }
table.std th { text-align: left; font-family: var(--wa-font-family-code); font-size: var(--wa-font-size-2xs); text-transform: uppercase; letter-spacing: .04em; color: var(--wa-color-text-quiet); padding: .5em .45em; border-bottom: 2px solid var(--wa-color-text-normal); font-weight: 500; }
table.std td { padding: .55em .45em; border-bottom: var(--wa-border-width-s) solid var(--wa-color-surface-border); white-space: nowrap; }
table.std td.n, table.std th.n { text-align: center; font-family: var(--wa-font-family-code); }
table.std td.note { padding-top: .8em; }
table.std tr.adv td { background: color-mix(in oklab, var(--wa-color-brand-fill-loud) 7%, transparent); }
table.std tr.adv { font-weight: 600; }
table.std tr.adv td:first-child { box-shadow: inset 3px 0 0 var(--wa-color-brand-fill-loud); }
.pts { color: var(--wa-color-brand-fill-loud); font-weight: 700; font-family: var(--wa-font-family-code); }

/* ---- Knockout bracket (the road to the final) ---- */
.bracket-scroll { overflow-x: auto; padding-bottom: var(--wa-space-s); }
.bracket { display: flex; gap: var(--wa-space-2xl); min-width: min-content; }
.br-col { display: flex; flex-direction: column; min-width: 12.5rem; flex: 1; }
/* each round's matches spread evenly so a later match centers between its two feeders */
.br-col .br-match { flex: 1 0 auto; margin-block: auto; }
.br-round-label { font-family: var(--wa-font-family-code); font-size: var(--wa-font-size-2xs); text-transform: uppercase; letter-spacing: .1em; color: var(--wa-color-brand-fill-loud); font-weight: 600; text-align: center; padding-bottom: .5em; border-bottom: 2px solid var(--wa-color-surface-border); margin-bottom: var(--wa-space-m); }

/* match card — connector "elbow" drawn with pseudo-elements */
.br-match { position: relative; background: var(--wa-color-surface-raised); border: var(--wa-border-width-s) solid var(--wa-color-surface-border); border-radius: var(--wa-border-radius-m); padding: var(--wa-space-2xs) 0; box-shadow: var(--wa-shadow-s); }
.br-match.tbd { opacity: .5; }
.br-col:not(:last-child) .br-match::after { content: ""; position: absolute; top: 50%; right: calc(var(--wa-space-2xl) * -0.5 - 1px); width: calc(var(--wa-space-2xl) * 0.5); border-top: 2px solid var(--wa-color-surface-border); }
.br-col:not(:first-child) .br-match::before { content: ""; position: absolute; top: 50%; left: calc(var(--wa-space-2xl) * -0.5); width: calc(var(--wa-space-2xl) * 0.5); border-top: 2px solid var(--wa-color-surface-border); }

.br-team { display: flex; align-items: center; justify-content: space-between; gap: var(--wa-space-s); padding: var(--wa-space-2xs) var(--wa-space-s); color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-s); }
.br-team + .br-team { border-top: var(--wa-border-width-s) solid var(--wa-color-surface-border); }
.br-team.win { color: var(--wa-color-text-normal); font-weight: 700; }
.br-team.win .br-score { color: var(--wa-color-brand-fill-loud); }
.br-team.out { opacity: .55; }
.br-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-score { font-family: var(--wa-font-family-code); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.br-pen { font-size: .8em; color: var(--wa-color-text-quiet); }
.br-date { font-family: var(--wa-font-family-code); font-size: var(--wa-font-size-3xs, .68rem); text-transform: uppercase; letter-spacing: .05em; color: var(--wa-color-text-quiet); text-align: center; padding: .25em 0 .1em; }
.br-match.done .br-date { display: none; }
@media (max-width: 48rem) {
  /* connectors get noisy on tiny screens; drop them, keep the columns scrollable */
  .br-match::before, .br-match::after { display: none; }
  .br-col { min-width: 11rem; }
}

/* ---- Leaderboard (scorers) ---- */
.lead { display: flex; align-items: center; gap: var(--wa-space-s); padding: .5em 0; border-bottom: var(--wa-border-width-s) solid var(--wa-color-surface-border); }
.lead .r { font-family: var(--wa-font-family-code); font-size: var(--wa-font-size-s); color: var(--wa-color-text-quiet); width: 1.4em; text-align: center; }
.lead .fl { font-size: 1.25em; } .lead .nm { font-weight: 600; }
.lead .gv { margin-inline-start: auto; font-family: var(--wa-font-family-code); font-size: var(--wa-font-size-s); color: var(--wa-color-text-quiet); }
.lead .gv b { color: var(--wa-color-brand-fill-loud); font-size: var(--wa-font-size-l); }

/* ---- Footer ---- */
footer.foot { padding-block: var(--wa-space-2xl) var(--wa-space-3xl); border-top: var(--wa-border-width-s) solid var(--wa-color-surface-border); margin-top: var(--wa-space-xl); color: var(--wa-color-text-quiet); font-family: var(--wa-font-family-code); font-size: var(--wa-font-size-2xs); display: flex; gap: var(--wa-space-l); flex-wrap: wrap; align-items: center; text-transform: uppercase; letter-spacing: .06em; }
footer.foot .c { margin-inline-start: auto; text-transform: none; letter-spacing: 0; opacity: .75; }
footer.foot a { text-decoration: none; transition: color var(--wa-transition-normal) var(--wa-transition-easing); }
footer.foot a:hover { color: var(--wa-color-brand-fill-loud); }