:root{
    --navy-deep:#04101f;
    --navy:#0a1d38;
    --navy-mid:#0e2b52;
    --lime:#c3d600;
    --blue:#2196f3;
    --white:#ffffff;
    --paper:#f4f6f8;
    --ink:#0a1d38;
    --ink-soft:#4a5b6e;
    --rule:rgba(255,255,255,.14);
    --display:"Anton","Haettenschweiler",Impact,sans-serif;
    --cond:"Barlow Condensed","Arial Narrow",sans-serif;
    --body:"Barlow","Segoe UI",system-ui,sans-serif;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{
    margin:0;background:var(--navy-deep);color:var(--white);
    font-family:var(--body);font-size:17px;line-height:1.6;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }
  img{max-width:100%;display:block}
  a{color:var(--lime)}
  .wrap{max-width:70rem;margin:0 auto;padding:0 1.25rem}

  .topbar{background:#000;border-bottom:1px solid var(--rule)}
  .topbar .wrap{display:flex;align-items:center;gap:1.5rem;
    justify-content:space-between;padding-top:.9rem;padding-bottom:.9rem;flex-wrap:wrap}
  .logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--white)}
  .logo .mark{font-family:var(--display);font-size:2.1rem;line-height:1;letter-spacing:.02em}
  .logo .mark span{color:var(--lime)}
  .logo .sub{font-family:var(--cond);font-weight:700;font-size:.66rem;
    letter-spacing:.13em;text-transform:uppercase;color:#9fb3c8;line-height:1.25}
  nav ul{display:flex;gap:1.15rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
  nav a{font-family:var(--cond);font-weight:600;text-transform:uppercase;
    letter-spacing:.06em;font-size:.9rem;color:#cfe0ee;text-decoration:none;
    padding-bottom:.2rem;border-bottom:2px solid transparent}
  nav a:hover,nav a:focus-visible{color:var(--white);border-bottom-color:var(--lime)}
  nav a[aria-current]{color:var(--lime);border-bottom-color:var(--lime)}

  .socials{display:flex;gap:.6rem;align-items:center}
  .socials a{
    width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
    background:var(--blue);color:#fff;transition:background .15s;
  }
  .socials a.ig{background:var(--lime);color:#16210a}
  .socials a:hover,.socials a:focus-visible{background:#fff;color:var(--navy)}
  .socials svg{width:19px;height:19px;fill:currentColor;display:block}
  .fsoc{display:flex;align-items:center;gap:.55rem;margin:.35rem 0}
  .fsoc svg{width:17px;height:17px;fill:var(--lime);flex:none}

  .hero{position:relative;overflow:hidden;
    background:
      radial-gradient(120% 90% at 72% 18%, rgba(33,150,243,.30), transparent 60%),
      radial-gradient(90% 70% at 20% 10%, rgba(255,255,255,.07), transparent 55%),
      linear-gradient(180deg,#06182e 0%,#0a1d38 55%,#061224 100%);
  }
  .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26%;
    background:linear-gradient(180deg,#a56c2c,#6d4318);
    box-shadow:inset 0 12px 30px rgba(0,0,0,.45)}
  .hero .wrap{position:relative;z-index:2;
    display:grid;grid-template-columns:1.35fr .9fr;gap:2rem;
    padding-top:3rem;padding-bottom:4.5rem;align-items:start}
  h1{margin:0;font-family:var(--display);line-height:.88;letter-spacing:.005em}
  .h-line1{font-size:clamp(2.6rem,7.2vw,5.1rem);text-transform:uppercase}
  .h-line2{display:block;font-family:var(--cond);font-style:italic;font-weight:700;
    color:var(--lime);text-transform:uppercase;
    font-size:clamp(1.6rem,4.4vw,3.1rem);line-height:1;margin-top:.35rem}
  .h-year{display:block;font-family:var(--display);color:var(--blue);
    font-size:clamp(2.6rem,7vw,4.8rem);line-height:1;margin-top:.15rem}
  .ribbon{display:inline-block;margin-top:1.1rem;background:var(--white);color:var(--navy);
    font-family:var(--cond);font-weight:700;text-transform:uppercase;
    letter-spacing:.07em;font-size:1rem;padding:.45rem 1.1rem}
  .hero-side{text-align:right;padding-top:.6rem}
  .dates{font-family:var(--display);font-size:clamp(1.5rem,3.4vw,2.5rem);line-height:1.02}
  .dates .mon{color:var(--lime);display:block}
  .hero-side hr{border:0;border-top:2px solid var(--blue);margin:1rem 0 1rem auto;width:62%}
  .venue{font-family:var(--cond);font-weight:600;text-transform:uppercase;
    letter-spacing:.05em;font-size:clamp(1.05rem,2.1vw,1.5rem);line-height:1.15}
  .entries{margin-top:1.6rem;background:var(--lime);color:#16210a;
    padding:1rem 1.2rem;text-align:center}
  .entries b{display:block;font-family:var(--display);
    font-size:clamp(1.15rem,2.4vw,1.7rem);line-height:1.05;text-transform:uppercase}
  .entries i{display:block;font-family:var(--cond);font-style:italic;font-weight:600;
    font-size:.95rem;margin-top:.35rem}

  .formats{background:var(--navy);border-top:1px solid var(--rule);
    border-bottom:1px solid var(--rule)}
  .formats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;
    padding-top:2.4rem;padding-bottom:2.4rem;align-items:stretch}
  .fmt{text-align:center;display:flex;flex-direction:column}
  .fmt .disc{width:74px;height:74px;margin:0 auto .7rem;border-radius:50%;
    display:grid;place-items:center;font-size:2rem;
    background:var(--blue);border:3px solid rgba(255,255,255,.85)}
  .fmt:nth-child(2) .disc{background:var(--lime)}
  .fmt h3{margin:0;font-family:var(--display);font-size:1.5rem;text-transform:uppercase}
  .fmt .games{font-family:var(--cond);font-weight:600;letter-spacing:.08em;
    text-transform:uppercase;color:#a9c0d6;font-size:.85rem;margin:.2rem 0 .55rem}
  .tag{display:inline-block;background:var(--blue);color:#fff;font-family:var(--cond);
    font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.72rem;
    padding:.28rem .7rem}
  .fmt:nth-child(2) .tag{background:var(--lime);color:#16210a}

  .welcome{background:var(--paper);color:var(--ink);text-align:center;padding:4rem 0 3.2rem}
  .welcome h2{margin:0;font-family:var(--display);text-transform:uppercase;
    font-size:clamp(1.5rem,3.6vw,2.2rem);line-height:1.12}
  .welcome h2 span{display:block;color:var(--blue)}
  .welcome .lead{max-width:44rem;margin:1.1rem auto 2.5rem;color:var(--ink-soft)}
  .feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));
    gap:1.5rem;border-top:1px solid #d8dfe6;padding-top:2rem}
  .feat{padding:0 .6rem;border-right:1px solid #d8dfe6}
  .feat:last-child{border-right:0}
  .feat .ico{font-size:1.9rem;line-height:1;margin-bottom:.6rem}
  .feat p{margin:0;font-family:var(--cond);font-weight:700;text-transform:uppercase;
    letter-spacing:.03em;font-size:.95rem;line-height:1.25}
  .strap{margin:2.6rem 0 0;font-family:var(--cond);font-style:italic;font-weight:700;
    text-transform:uppercase;font-size:clamp(1.1rem,2.6vw,1.55rem);color:var(--ink)}
  .strap u{text-decoration:none;border-bottom:4px solid var(--lime);padding-bottom:.15rem}

  .notice{background:var(--navy-deep);padding:3rem 0}
  .notice .card{background:var(--navy-mid);border:1px solid var(--rule);
    padding:1.9rem 1.6rem;text-align:center}
  .notice h3{margin:0 0 .7rem;font-family:var(--display);
    font-size:clamp(1.2rem,2.8vw,1.7rem)}
  .notice p{margin:.35rem 0;color:#cfe0ee}

  footer{background:#000;padding:2.6rem 0;border-top:1px solid var(--rule)}
  footer .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
    gap:2rem;align-items:start}
  footer h4{margin:0 0 .55rem;font-family:var(--cond);font-weight:700;font-size:.72rem;
    letter-spacing:.15em;text-transform:uppercase;color:#8ba3ba}
  .org{font-family:var(--display);font-size:1.6rem;line-height:1.05;text-transform:uppercase}
  .org span{color:var(--lime)}
  footer p{margin:.25rem 0;font-size:.95rem;color:#cfe0ee}
  footer a{color:#cfe0ee;text-decoration:none}
  footer a:hover,footer a:focus-visible{color:var(--lime);text-decoration:underline}
  footer .sanction{font-size:.82rem;color:#9fb3c8;margin-top:.6rem}
  .hash{color:var(--lime);font-family:var(--cond);font-weight:700;letter-spacing:.05em}
  .closer{font-family:var(--cond);font-style:italic;font-weight:700;
    text-transform:uppercase;font-size:1.25rem;line-height:1.1;text-align:right}
  .closer u{text-decoration:none;border-bottom:3px solid var(--lime)}

  @media(max-width:60rem){
    .hero .wrap{grid-template-columns:1fr}
    .hero-side{text-align:left}
    .hero-side hr{margin-left:0}
    .formats .wrap{grid-template-columns:repeat(2,1fr)}
    .closer{text-align:left}
  }
  @media(max-width:34rem){
    .formats .wrap{grid-template-columns:1fr}
    .feat{border-right:0}
  }
    .entries .cta{display:inline-block;margin-top:.7rem;background:var(--lime);color:var(--navy-deep);font-family:var(--cond);font-weight:700;font-size:1.05rem;letter-spacing:.02em;padding:.5rem 1.1rem;border-radius:6px;text-decoration:none}
    .entries .cta:hover{background:#d3e51a}
    /* Until entries open there is nothing to click: the same shape as the
       button, but plainly a status rather than an invitation. */
    .entries .cta.soon{background:transparent;border:1px solid rgba(22,33,10,.45);cursor:default;text-transform:uppercase;letter-spacing:.06em;font-size:.95rem}
    .entries .cta.soon:hover{background:transparent}

/* ---- sponsors page ---- */
.sponsors-page{padding:3.5rem 0 4rem}
.sponsors-page h1{font-family:var(--display);font-size:clamp(2.2rem,6vw,3.4rem);
  text-transform:uppercase;letter-spacing:.02em;margin:0 0 1.2rem}
.sponsors-page h2{font-family:var(--cond);font-weight:700;font-size:1.6rem;margin:2.6rem 0 .6rem}
.sponsors-page p{max-width:60ch;line-height:1.6;margin:0 0 1rem}
.sponsors-page .lede{font-size:1.1rem}
/* One row of logos that reflows on a phone. Each logo sits in a fixed-height
   box so a tall logo and a wide one still line up. */
.sponsor-grid{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  margin:2rem 0 1rem;align-items:center}
.sponsor{--tile:200px;display:grid;place-items:center;height:var(--tile);padding:1rem;
  background:#fff;border-radius:10px;overflow:hidden}
/* Capped in real pixels rather than as a percentage of the tile: a percentage
   height does not resolve for a logo sitting in a grid cell, so a square logo
   kept its full height and hung out of the bottom of its tile. */
.sponsor img{width:auto;height:auto;max-width:100%;
  max-height:calc(var(--tile) - 2rem);object-fit:contain}
/* A sponsor that has given us a web address becomes a link. It lifts slightly
   under the pointer so it is obvious it goes somewhere, and shows a focus ring
   for anyone using the keyboard rather than a mouse. */
a.sponsor,a.sponsor-main{text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
a.sponsor:hover,a.sponsor-main:hover,
a.sponsor:focus-visible,a.sponsor-main:focus-visible{transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(0,0,0,.45)}
a.sponsor:focus-visible,a.sponsor-main:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
@media (prefers-reduced-motion:reduce){a.sponsor,a.sponsor-main{transition:none}
  a.sponsor:hover,a.sponsor-main:hover{transform:none}}
.sponsor-empty{grid-column:1/-1;opacity:.6;font-style:italic;margin:0}
/* A sponsor whose logo we do not have yet: their name set in the tournament's
   own type, so the row still reads as a row of sponsors. */
.sponsor-name{font-family:var(--cond);font-weight:700;font-size:1.25rem;line-height:1.2;
  color:var(--navy-deep);text-align:center;text-wrap:balance}
/* A very wide logo sized by height would shrink to a sliver, so that one is
   sized by width instead and given two columns once there is room for them. */
.sponsor-wide{padding:.6rem 1rem}
.sponsor-wide img{width:100%;height:auto;max-height:calc(var(--tile) - 1.2rem)}
/* A logo drawn on black keeps its black; a white tile would put it in a box.
   A black tile on a navy page has no edge of its own, so it also gets a faint
   one, the same treatment the main sponsor's tile gets. */
.sponsor-dark{background:#000;border:1px solid rgba(255,255,255,.22)}
/* A squarish badge with detail in it - small type, a phone number - rather
   than a plain wordmark. Thinner border of tile, so every pixel of height
   goes to the logo instead of the padding. */
.sponsor-dark,.sponsor-tight{padding:.5rem}
.sponsor-dark img,.sponsor-tight img{max-height:calc(var(--tile) - 1rem)}
/* The main sponsor: the full width of the row, above the rest, and bigger.
   Dark, because their logo is supplied in white and vanishes on a white tile. */
.sponsor-main{grid-column:1/-1;background:#0b1f3a;border:1px solid rgba(255,255,255,.16);
  border-radius:10px;padding:1.6rem 1rem 1.9rem;text-align:center}
/* Written as .sponsors-page .sponsor-main-label, not .sponsor-main-label:
   .sponsors-page p caps paragraphs at 60ch and is the more specific selector
   of the two, so a plain class rule lost and the label sat left of centre. */
.sponsors-page .sponsor-main-label{font-family:var(--cond);font-weight:700;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;color:#9fb3c8;margin:0 0 1.1rem;
  max-width:none}
.sponsor-main img{max-width:min(100%,310px);max-height:200px;width:auto;height:auto;margin:0 auto}
@media(min-width:560px){.sponsor-wide{grid-column:span 2}}
/* Where to stay. The map is a box of fixed shape whether it is holding the
   button or the map itself, so the page does not jump when it loads. */
.code{background:var(--lime);color:#16210a;padding:.1rem .45rem;border-radius:4px;
  letter-spacing:.06em}
.stay-where{font-size:.95rem;color:#cfe0ee}
.map{position:relative;aspect-ratio:16/9;max-width:44rem;margin:1.4rem 0;
  display:grid;place-content:center;gap:.6rem;text-align:center;
  background:var(--navy-mid);border:1px solid var(--rule);border-radius:10px;overflow:hidden}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map .hint{max-width:28ch;margin:0 auto;color:#9fb3c8;font-size:.85rem}
.btn-map{font-family:var(--cond);font-weight:700;font-size:1rem;cursor:pointer;
  background:var(--blue);color:#fff;border:0;border-radius:6px;padding:.55rem 1.2rem}
.btn-map:hover{background:#42a5f5}
.cta-link{display:inline-block;background:var(--lime);color:var(--navy-deep);font-family:var(--cond);
  font-weight:700;font-size:1.05rem;padding:.55rem 1.2rem;border-radius:6px;text-decoration:none}
.cta-link:hover{background:#d3e51a}

/* ---- long text pages (rules) ---- */
.doc-page{padding:3.5rem 0 4rem}
.doc-page h1{font-family:var(--display);font-size:clamp(2rem,5.5vw,3rem);text-transform:uppercase;
  letter-spacing:.02em;margin:0 0 .8rem}
.doc-page h2{font-family:var(--cond);font-weight:700;font-size:1.35rem;margin:2.2rem 0 .5rem;
  color:var(--lime)}
.doc-page p,.doc-page li{max-width:70ch;line-height:1.65}
.doc-page p{margin:0 0 .9rem}
.doc-page ul{max-width:70ch;margin:0 0 .9rem;padding-left:1.2rem}
.doc-page li{margin:0 0 .35rem}
.doc-page .lede{font-size:1.05rem;opacity:.85;margin-bottom:1.6rem}
.rules-table{border-collapse:collapse;margin:.6rem 0 1.2rem;font-size:.95rem}
.rules-table th,.rules-table td{border:1px solid var(--rule);padding:.4rem .9rem;text-align:left}
.rules-table th{font-family:var(--cond);font-weight:700}
.rules-foot{margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid var(--rule);opacity:.8}

/* the tag sits on the bottom edge of every card, games line or not */
.fmt .tag{margin-top:auto;align-self:center}

/* Anton ships in ONE weight, 400. Headings and <b> default to bold, so the
   browser was faking a bold by smearing the glyphs - 21% more ink than the
   real letters. White on navy, that reads as blurry. Asking for the weight
   Anton actually has stops the smearing and the text goes crisp. Any new
   rule using var(--display) needs font-weight:400 for the same reason. */
.logo .mark,
h1,
.h-year,
.dates,
.entries b,
.fmt h3,
.welcome h2,
.notice h3,
.org,
.sponsors-page h1,
.doc-page h1{font-weight:400}