/* footballapi.org: the approved foundations. Component styles arrive with the pages that use them. */
:root {
  --bg: #ffffff; --mist: #f3f4f2; --line: #e3e5e2; --ink: #14181A; --ink2: #6b716f;
  --deep: #0F3B2E; --acc: #B89B5E;
  --radius: 10px; --head: 76px;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink2); }
html { scroll-padding-top: calc(var(--head) + 12px); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 300 15px/1.6 var(--sans); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 1.5px solid var(--acc); outline-offset: 3px; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.wide { font-variation-settings: "wdth" 125; }
svg { color: var(--ink); }
.ln { fill: none; stroke: currentColor; stroke-linecap: round; }
.ac { fill: var(--acc); }

/* header */
.hd { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.hd-in { height: var(--head); display: flex; align-items: center; gap: 30px; }
.brand { display: flex; align-items: center; gap: 14px; margin-right: auto; }
.brand svg { width: 30px; height: 30px; }
.brand span { font-size: 14px; letter-spacing: .34em; white-space: nowrap; }
.nav { display: flex; gap: 28px; }
.nav a { font-size: 13.5px; letter-spacing: .04em; color: var(--ink2); white-space: nowrap; }
.nav a[aria-current] { color: var(--ink); }
.burger { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer; place-items: center; }
.burger svg { width: 18px; height: 18px; }
.drawer { display: none; border-top: 1px solid var(--line); padding: 8px 24px 20px; }
.drawer > a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.drawer .grp { margin-top: 16px; }
.hd.open .drawer { display: block; }

/* buttons: pills, one size per group */
.btn { display: inline-grid; place-items: center; height: 46px; width: 186px; border-radius: 999px; font-size: 14px; letter-spacing: .04em; white-space: nowrap; cursor: pointer; border: 0; background: none; }
.btn.p { background: var(--deep); color: #fff; }
.btn.p:hover { background: #0b2e24; }
.btn.o { box-shadow: inset 0 0 0 1px var(--ink); }
.btn.o:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.hd .btn { height: 40px; width: 160px; font-size: 13.5px; }
.grp { display: grid; grid-template-columns: repeat(auto-fill, 186px); gap: 12px; }

/* the header once signed in: one account pill */
.hd-me .me { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 8px 0 4px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
.hd-me .av { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--deep); color: #fff; font-size: 13px; }
.hd-me .nm { font-size: 13.5px; letter-spacing: .04em; }
.hd-me .pl { padding: 3px 9px; border-radius: 999px; font-size: 10px; letter-spacing: .14em; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink2); }
.hd-me .pl.m { background: rgba(184,155,94,.16); box-shadow: inset 0 0 0 1px rgba(184,155,94,.55); color: #7a6332; }
.hd .grp, .drawer .grp { grid-template-columns: repeat(2, 160px); }

/* type */
.kw { margin: 0 0 22px; font-size: 12.5px; letter-spacing: .3em; font-weight: 400; color: var(--ink2); }
.title { display: block; font-size: 62px; line-height: 1.02; letter-spacing: -.035em; font-weight: 200; max-width: 760px; }
.sub { color: var(--ink2); font-size: 17px; max-width: 520px; margin: 22px 0 32px; }
.holding { padding-top: 96px; padding-bottom: 110px; }

/* footer */
.ft { background: var(--deep); color: rgba(255,255,255,.72); }
.ft-in { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 30px; padding: 56px 24px 40px; }
.ft .brand { color: #fff; margin: 0; }
.ft .brand svg { color: #fff; }
.ft p { margin: 18px 0 0; font-size: 14px; max-width: 300px; }
.ft h4 { margin: 0 0 14px; font-size: 12px; letter-spacing: .26em; font-weight: 400; color: #fff; }
.ft ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 14px; }
.ft-bot { border-top: 1px solid rgba(255,255,255,.12); padding: 18px 24px 26px; font-size: 12.5px; letter-spacing: .04em; color: rgba(255,255,255,.55); }

@media (max-width: 960px) {
  .nav, .hd-act { display: none; }
  .burger { display: grid; }
  .hd-me { display: flex; }
  .hd-me .me { padding: 0; box-shadow: none; }
  .hd-me .nm, .hd-me .pl { display: none; }
  .title { font-size: 42px; }
  .ft-in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .grp { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .ft-in { grid-template-columns: 1fr; }
}