/* The landing page at /: the site's colours, gutters and hex lattice
   (style.css) with brsm.dev's heavy tight headings and its board scene beside
   the title. Loaded after style.css, on the landing page only. */
.home { --c: var(--acc); --head: var(--sans); }
body.home main { padding-bottom: 0; }

.home h1, .home h2 { font-family: var(--head); text-wrap: balance; margin: 0 0 1rem; }
.home h1 { font-weight: 800; font-size: clamp(2.9rem, 7vw, 5.6rem); line-height: .95; letter-spacing: -.05em; }
.home h2 { font-weight: 800; font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1; letter-spacing: -.045em; }
.home .go { display: inline-flex; align-items: center; gap: .4rem; color: var(--c); font: 600 .95rem var(--head);
  text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--c) 35%, transparent); padding-bottom: 2px; transition: border-color .2s; }
.home .go i { font-style: normal; transition: transform .2s; }
.home .go:hover { border-color: var(--c); }
.home .go:hover i { transform: translate(2px, -2px); }
.home .ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; margin: 1.6rem 0 0; }
.home .method { color: var(--ink-2); font-size: 1.05rem; margin: 0; max-width: 30rem; }
/* The one action: playing HexN. */
.home .go.btn { background: var(--c); color: var(--bg); border: 0; border-radius: 6px; padding: .6rem 1.1rem; }
.home .go.btn:hover { background: color-mix(in srgb, var(--c) 85%, white); }

/* Hero: the title and claim on the left; brsm.dev's board scene (board.js)
   on the page's own lattice to their right, its canvas spanning the page
   from the top so its hexes are the lattice's. On a phone the board sits
   above the title. */
.home .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; min-height: 22rem; padding: 2.5rem 0 1rem; }
/* The title carries the logo in colour; the masthead above has its colourless form. */
.home h1 { display: flex; align-items: center; gap: .14em; }
.home h1 .mark { width: .8em; height: .8em; flex: none; }
.home .hero .ct { max-width: 34rem; }
.home #catan { position: absolute; left: 0; top: 0; width: 100%; z-index: -1; pointer-events: none; }
@media (max-width: 900px) { .home .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 17rem; } }
.home .stat { font: 500 clamp(1.1rem, 2.2vw, 1.5rem)/1.3 var(--head); margin: 0 0 .8rem; }
.home .stat b { color: var(--c); font-weight: 800; }

/* Sections */
.home .block { padding: 5.5rem 0 1rem; }
.home .lede { color: var(--ink-2); font-size: 1.15rem; max-width: 40rem; margin: 0 0 2rem; }
.home .scroll { overflow-x: auto; margin-top: 1.5rem; }
.home .block h3 { font: 700 1.3rem var(--head); letter-spacing: -.02em; margin: 2.5rem 0 0; }
.home .block h2 + h3 { margin-top: 1.5rem; }
.home table.record { border-collapse: collapse; width: 100%; min-width: 38rem; font-variant-numeric: tabular-nums; }
.home .record th { text-align: left; color: var(--ink-3); font: 500 .72rem var(--mono); text-transform: uppercase; letter-spacing: .1em; padding: .6rem 1rem .6rem 0; border-bottom: 1px solid var(--rule); }
.home .record td { padding: .9rem 1rem .9rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.home .record td:nth-child(2) { font-weight: 700; color: var(--ink); }
.home .record td:nth-child(n+3) { font: .9rem var(--mono); color: var(--ink-2); white-space: nowrap; }
.home .record small { display: block; color: var(--ink-3); font: .78rem var(--mono); margin-top: .2rem; }
/* The two rating charts side by side, stacked where they would be squeezed;
   each scales to its card, never scrolls, and its title is its claim. */
.home .ranks { padding-top: 2rem; }
.home .charts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.home .charts figure.chart { margin: 0; min-width: 0; }
.home figure.chart svg { min-width: 0; }
.home .viz .viz-title { font-size: 21px; font-weight: 700; }
@media (max-width: 72rem) { .home .charts { grid-template-columns: 1fr; } }
/* Rehex's call-out: one card, the accent down its edge. */
.home .callout { background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--c);
  border-radius: 10px; padding: 2rem 2.2rem; max-width: 46rem; }
.home .callout h2 { margin-bottom: .8rem; }
.home .callout p { color: var(--ink-2); font-size: 1.1rem; margin: 0; }
.home .callout .ctas { margin-top: 1.2rem; }
.home .note { color: var(--ink-2); max-width: none; margin: 1.6rem 0 0; padding-left: 1rem; border-left: 2px solid var(--c); }

.home .play { padding-bottom: 5rem; text-align: left; }
@media (prefers-reduced-motion: reduce) { .home .go i { transition: none; } }