/* ============================================================================
   NAME LEGACY -- 2026 redesign
   Translated from the canvas design. The artboards carry their styles inline
   because that is how a design component works; a real page wants them in one
   place, so every repeated inline rule there is a class here and the values
   are unchanged.

   Three typefaces with three jobs: Bricolage Grotesque is display only and
   never sets a paragraph; Public Sans sets everything you read; IBM Plex Mono
   is reserved for figures and the small uppercase labels, so when it appears
   it means "this is data".

   Girls are clay, boys are indigo, and the two differ in lightness as well as
   hue so the lists stay apart where the hue does not read. Up is green, down
   is red, and neither is ever the only signal -- the arrow and the number
   carry it too.
   ========================================================================== */
:root{
  --navy:#13203A; --navy-2:#1D2D4C; --navy-3:#24365A; --navy-line:#2E4168;
  --on-navy:#FFFFFF; --on-navy-2:#DDE3EE; --on-navy-3:#CBD3E1; --on-navy-4:#AEB8CC;

  --page:#FFFFFF; --panel:#F3F5F8;
  --ink:#13203A; --ink-2:#3D475C; --ink-3:#556079; --ink-dim:#8C96AA;
  --line:#E3E6EC; --line-2:#CBD1DB; --line-3:#DDE1E8;

  --girl:#C24E22; --girl-soft:#F0905F; --girl-tint:#FBEDE6; --girl-ink:#9A3B17; --girl-bar:#F0B394;
  --boy:#2B4FC0;  --boy-soft:#8FA8F2;  --boy-tint:#E8EDFB;  --boy-ink:#233F9C;  --boy-bar:#A9BBF0;
  --up:#1D7A52; --up-bright:#8FE0B5; --down:#A23A2A;
  --link:#2B4FC0; --link-hover:#1A3591;

  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;

  --wrap:1200px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--page); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.5;
}
a{color:var(--link)}
a:hover{color:var(--link-hover)}
h1,h2,h3{font-family:var(--display); font-weight:800; letter-spacing:-.02em; margin:0}
img,svg{display:block}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.kicker{
  margin:0; font-family:var(--mono); font-size:13px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3);
}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
:focus-visible{outline:3px solid var(--boy-soft); outline-offset:2px}

/* ---------- header ---------- */
.top{background:var(--navy); border-bottom:1px solid var(--navy-3)}
.top .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:12px 28px; padding-top:12px; padding-bottom:12px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--on-navy); min-height:44px}
.brand span{font-family:var(--display); font-weight:800; font-size:22px; letter-spacing:-.02em}
.mainnav{display:flex; flex-wrap:wrap; gap:2px; flex:1 1 auto}
.mainnav a,.top .about{
  display:inline-flex; align-items:center; min-height:44px;
  padding:0 14px; font-weight:600; font-size:15px; text-decoration:none;
  color:var(--on-navy-2); border-radius:8px;
}
.mainnav a:hover,.top .about:hover{color:var(--on-navy); background:var(--navy-3)}
.mainnav a[aria-current="page"]{color:var(--on-navy); background:var(--navy-3); font-weight:700}

/* ---------- hero ---------- */
.hero{background:var(--navy); color:var(--on-navy)}
.hero .wrap{display:flex; flex-wrap:wrap; gap:48px 56px; align-items:flex-start; padding-top:72px; padding-bottom:88px}
.hero-main{flex:999 1 560px; min-width:0; display:flex; flex-direction:column; gap:28px}
.hero .kicker{color:var(--on-navy-4)}
.hero h1{font-size:clamp(44px,6vw,80px); line-height:.98; letter-spacing:-.035em}
.hero-lede{margin:0; max-width:520px; font-size:19px; color:var(--on-navy-3)}

/* the search is the one dominant object on the page */
.finder{display:flex; flex-direction:column; gap:14px; max-width:640px}
.finder > label{font-weight:600; font-size:15px; color:var(--on-navy-2)}
.searchwrap{position:relative}
.searchbar{
  display:flex; align-items:center; gap:10px; background:#fff;
  border-radius:16px; padding:6px 6px 6px 20px; min-height:64px;
}
.searchbar input{
  flex:1; min-width:0; border:0; outline:none; font:inherit; font-size:20px;
  color:var(--ink); background:transparent;
}
.searchbar input::-webkit-search-cancel-button{-webkit-appearance:none}
.gobtn{
  display:inline-flex; align-items:center; justify-content:center; height:52px;
  padding:0 24px; border:0; border-radius:12px; background:var(--girl);
  color:#fff; font:inherit; font-weight:700; font-size:16px; text-decoration:none; cursor:pointer;
}
.gobtn:hover{background:var(--girl-ink); color:#fff}

.suggest{
  position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:5;
  background:#fff; color:var(--ink); border-radius:16px;
  box-shadow:0 18px 44px rgba(0,0,0,.35); padding:8px; display:none;
}
.suggest.open{display:block}
.suggest ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:2px}
.suggest a{
  display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center;
  gap:14px; min-height:54px; padding:0 14px; border-radius:10px;
  color:var(--ink); text-decoration:none;
}
.suggest a:hover,.suggest a:focus,.suggest li.on > a{background:var(--panel); outline:none}
.suggest .nm{font-family:var(--display); font-size:21px; font-weight:500; letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.suggest .nm b{font-weight:800}
.pill{
  display:inline-flex; align-items:center; height:24px; padding:0 10px;
  border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap;
}
.pill.g{background:var(--girl-tint); color:var(--girl-ink)}
.pill.b{background:var(--boy-tint); color:var(--boy-ink)}
.suggest .fig{
  font-size:13px; color:var(--ink-3); font-variant-numeric:tabular-nums;
  min-width:128px; text-align:right;
}
.suggest .foot{
  display:flex; justify-content:space-between; gap:12px; border-top:1px solid var(--line);
  margin-top:6px; padding:10px 14px 4px; font-size:13px; color:var(--ink-3);
}
.suggest .none{padding:16px 14px; font-size:14px; color:var(--ink-3)}

.seg{display:inline-flex; border-radius:12px; padding:4px; gap:4px}
.seg button{
  height:40px; padding:0 16px; border:0; border-radius:9px; background:transparent;
  font:inherit; font-weight:600; font-size:14px; cursor:pointer;
}
.hero .seg{background:var(--navy-2); border:1px solid var(--navy-line)}
.hero .seg button{color:var(--on-navy-2)}
.hero .seg button[aria-pressed="true"]{background:#fff; color:var(--ink); font-weight:700}
.hero select{
  height:50px; padding:0 14px; border-radius:12px; border:1px solid var(--navy-line);
  background:var(--navy-2); color:#fff; font:inherit; font-size:15px; font-weight:600;
}
.finder-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center}

.chiprow{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.chiprow .lab{font-size:14px; color:var(--on-navy-4); margin-right:4px}
.chip{
  display:inline-flex; align-items:center; min-height:36px; padding:0 14px;
  border-radius:999px; background:var(--navy-2); border:1px solid var(--navy-line);
  color:#fff; font-size:14px; font-weight:600; text-decoration:none;
}
.chip:hover{background:var(--navy-3); color:#fff}

/* ---------- names of the day ---------- */
.notd{flex:1 1 340px; min-width:0; display:flex; flex-direction:column; gap:16px}
.notd-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.notd-head h2{font-size:22px; font-weight:700}
.notd-head .date{font-family:var(--mono); font-size:13px; color:var(--on-navy-4)}
.notd-card{
  display:flex; flex-direction:column; gap:10px; padding:22px; border-radius:18px;
  background:var(--navy-2); border:1px solid var(--navy-line);
  text-decoration:none; color:#fff;
}
.notd-card:hover{background:var(--navy-3); color:#fff}
.notd-card .row{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.notd-card .sex{font-family:var(--mono); font-size:12px; letter-spacing:.08em}
.notd-card .sex.g{color:var(--girl-soft)}
.notd-card .sex.b{color:var(--boy-soft)}
.notd-card .rank{font-size:14px; color:var(--on-navy-4)}
.notd-card .nm{font-family:var(--display); font-size:44px; font-weight:700; line-height:1; letter-spacing:-.02em}
.notd-card svg{width:100%; height:56px}
.notd-card .meta{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:14px; color:var(--on-navy-3)}
.notd-card .rise{color:var(--up-bright); font-weight:600}
.notd-card .fall{color:var(--on-navy-3); font-weight:600}
.notd-note{margin:0; font-size:13px; color:var(--on-navy-4)}

/* ---------- sections ---------- */
.sec{padding:72px 0 0; display:flex; flex-direction:column; gap:28px}
.sec + .sec{padding-top:56px; margin-top:56px; border-top:1px solid var(--line)}
.sechead{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:16px 24px}
.sechead h2{font-size:clamp(30px,4vw,44px); letter-spacing:-.03em}
.sechead .col{display:flex; flex-direction:column; gap:6px}
.more{
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  font-weight:700; font-size:15px; text-decoration:none;
}
.note{margin:0; font-size:13px; color:var(--ink-3)}

/* ---------- top ten ---------- */
.tens{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr)); gap:32px 48px}
.tenhead,.tenrow{
  display:grid; grid-template-columns:34px minmax(0,1fr) 96px 78px 54px;
  align-items:center; gap:12px;
}
.tenhead{
  padding:0 0 8px; font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3); border-bottom:2px solid var(--line-2);
}
.tenhead.g{border-bottom-color:var(--girl)}
.tenhead.b{border-bottom-color:var(--boy)}
.tenhead .r{text-align:right}
.tenrow{
  min-height:52px; border-bottom:1px solid var(--line);
  color:var(--ink); text-decoration:none;
}
.tenrow:hover{background:var(--panel); color:var(--ink)}
.tenrow .rk{font-family:var(--mono); font-size:14px; color:var(--ink-3)}
.tenrow .nm{font-family:var(--display); font-size:19px; font-weight:700; letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tenrow .ct{text-align:right; font-variant-numeric:tabular-nums; font-size:15px}
.tenrow .mv{text-align:right; font-size:13px; font-weight:700}
.up{color:var(--up)} .down{color:var(--down)} .flat{color:var(--ink-3)}

/* ---------- movers ---------- */
.movers{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:16px}
.mover{
  display:flex; flex-direction:column; gap:4px; padding:24px; border-radius:20px;
  background:var(--panel); color:var(--ink); text-decoration:none;
}
.mover:hover{background:var(--line); color:var(--ink)}
.mover .lab{font-size:13px; font-weight:700}
.mover .lab.g{color:var(--girl-ink)}
.mover .lab.b{color:var(--boy-ink)}
.mover .lab.n{color:var(--ink-2)}
.mover .nm{font-family:var(--display); font-size:34px; font-weight:800; letter-spacing:-.02em; line-height:1.05}
.mover .big{font-family:var(--display); font-size:26px; font-weight:800; letter-spacing:-.02em}
.mover .sub{font-size:14px; color:var(--ink-2)}

/* ---------- game strip ---------- */
.gamestrip{
  display:flex; flex-wrap:wrap; align-items:center; gap:24px 32px;
  padding:40px; border-radius:24px; background:var(--navy); color:#fff;
}
.gamestrip h2{font-size:clamp(26px,3.2vw,36px); letter-spacing:-.025em}
.gamestrip .kicker{color:var(--on-navy-4)}
.gamestrip p{margin:0; color:var(--on-navy-3)}
.gamestrip .col{display:flex; flex-direction:column; gap:8px; flex:1 1 420px; min-width:0}
.playbtn{
  display:inline-flex; align-items:center; justify-content:center; min-height:60px;
  padding:0 32px; border-radius:16px; background:var(--girl-soft); color:var(--navy);
  font-weight:800; font-size:18px; text-decoration:none;
}
.playbtn:hover{background:#fff; color:var(--navy)}

/* ---------- browse ---------- */
.browse{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:40px 56px}
.browse h3{font-size:18px; font-weight:700; font-family:var(--body); letter-spacing:0}
.bcol{display:flex; flex-direction:column; gap:32px}
.bgroup{display:flex; flex-direction:column; gap:14px}
.tags{display:flex; flex-wrap:wrap; gap:8px}
.tag{
  display:inline-flex; align-items:center; min-height:40px; padding:0 14px;
  border-radius:10px; border:1px solid var(--line-2); color:var(--ink);
  font-weight:600; font-size:14px; text-decoration:none;
}
.tag:hover{background:var(--navy); border-color:var(--navy); color:#fff}
.letters{display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:6px}
.letters a{
  display:flex; align-items:center; justify-content:center; min-height:44px;
  border-radius:10px; border:1px solid var(--line-2); color:var(--ink);
  font-family:var(--display); font-weight:700; font-size:16px; text-decoration:none;
}
.letters a:hover{background:var(--navy); border-color:var(--navy); color:#fff}
/* The states sit where they sit on the map rather than in alphabetical order:
   you look for a state by where it is. A 12-column grid gets close enough, and
   every tile keeps its full name in the accessible name. */
.tilemap{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:5px}
.tilemap a{
  display:flex; align-items:center; justify-content:center; aspect-ratio:1;
  min-height:36px; border-radius:7px; background:var(--panel); color:var(--ink-2);
  font-family:var(--mono); font-size:12px; font-weight:500; text-decoration:none;
}
.tilemap a:hover{background:var(--navy); color:#fff}

/* ---------- footer ---------- */
.foot{background:var(--panel); border-top:1px solid var(--line); margin-top:72px}
.foot .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px 32px;
  padding-top:40px; padding-bottom:40px; font-size:14px; color:var(--ink-2)}
.foot p{margin:0; max-width:620px}
.foot nav{display:flex; gap:20px}

@media (max-width:760px){
  .hero .wrap{padding-top:40px; padding-bottom:48px; gap:36px}
  .hero h1{font-size:clamp(34px,9vw,52px)}
  .searchbar{min-height:56px; padding-left:16px}
  .searchbar input{font-size:17px}
  .gobtn{height:46px; padding:0 18px}
  .suggest .fig{min-width:0}
  .sec{padding-top:48px}
  .sec + .sec{padding-top:40px; margin-top:40px}
  .gamestrip{padding:28px}
  .letters{grid-template-columns:repeat(6,minmax(0,1fr))}
  /* A 12-column map cannot give a 44px target on a 375px screen, and a 32px
     one fails the touch floor this design sets everywhere else. So below 760px
     the map stops being a map: the explicit placement is dropped and the tiles
     fall back into their document order, which is alphabetical. */
  .tilemap{grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px}
  .tilemap a{grid-column:auto !important; grid-row:auto !important;
    aspect-ratio:auto; min-height:44px; font-size:13px}
  .tenhead,.tenrow{grid-template-columns:28px minmax(0,1fr) 64px 70px 46px; gap:8px}
  .notd-card .nm{font-size:36px}
}

@media (max-width:760px){
  /* Four nav items wrapped onto three lines and the header took 227px of an
     812px screen before anything else. One scrolling row instead, and the
     About link steps aside -- it is in the footer on every page. */
  .top .wrap{gap:4px 16px; padding-top:8px; padding-bottom:8px}
  .mainnav{
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; margin:0 -24px; padding:0 24px;
  }
  .mainnav::-webkit-scrollbar{display:none}
  .mainnav a{padding:0 12px; white-space:nowrap}
  .top .about{display:none}
  .brand span{font-size:19px}
}