/* The hub's own layout. The family's fonts, colors, focus and selection come
   from /shared/css/family.css, loaded first; these names point at them. */
:root {
  --page: var(--sd-page); --ink: var(--sd-ink); --ink-2: var(--sd-ink-2); --hair: var(--sd-hair); --line: var(--sd-line);
  --yellow: var(--sd-yellow);
  --chart: var(--sd-chart); --map: var(--sd-map); --pay: var(--sd-pay); --dot: var(--sd-dot); --pindrop: var(--sd-pindrop);
  --slab: var(--sd-slab); --text: var(--sd-text);
  --col: 1080px;
  --ease-out: var(--sd-ease-out);
}
[data-game="chart"] { --game: var(--chart); }
[data-game="map"] { --game: var(--map); }
[data-game="pay"] { --game: var(--pay); }
[data-game="dot"] { --game: var(--dot); }
[data-game="pindrop"] { --game: var(--pindrop); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--page); color: var(--ink); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 15px/1.45 var(--text); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }

/* ---------- nameplate ---------- */
.plate { max-width: var(--col); margin: 0 auto; padding: 22px 16px 0; }
.plate-row { display: flex; justify-content: center; }
.ear { display: none; }
.nameplate { display: inline-flex; align-items: center; gap: .26em; font: 700 clamp(44px, 12vw, 84px)/1 var(--slab); letter-spacing: -.02em; text-decoration: none; }
.mark { display: grid; grid-template-columns: repeat(2, .27em); gap: .045em; flex: none; }
.mark i { width: .27em; height: .27em; border-radius: .05em; }
.mark .chart { background: var(--chart); } .mark .map { background: var(--map); }
.mark .pay { background: var(--pay); } .mark .dot { background: var(--dot); }
.dateline { display: flex; justify-content: space-between; margin-top: 14px; padding: 8px 0 7px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); font: 800 11.5px/1 var(--text); letter-spacing: .06em; text-transform: uppercase; font-variant-numeric: tabular-nums; }

main { max-width: var(--col); margin: 0 auto; padding: 0 16px 36px; }

/* ---------- the games ---------- */
.edition h2 a, .edition h3 a { text-decoration: none; }
.edition h2 a:hover, .edition h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.edition b { font-weight: 700; background: var(--game); border-radius: 4px; padding: 0 .16em .04em; }
.meta { margin-top: 4px; font-size: 14px; color: var(--ink-2); }
.meta .no { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* A game's art: a crop of its own preview card, set on its color. The crop
   keeps a share of the card's width (--cw) from a corner (--cx, --cy) and has
   its own shape (--ca); the box centres it. The chart, and the small map,
   turn to ink and multiply onto the color, so the line and streets read black
   on the game's color. The big map and Dot's field sit inset as plates on a
   band of their color. */
.art { position: relative; display: grid; place-items: center; overflow: hidden; border-radius: 6px; background: var(--game); box-shadow: inset 0 0 0 1px rgba(18, 18, 18, .12); }
.art.big { aspect-ratio: 3 / 2; }
.art.small { aspect-ratio: 1.09; }
.crop { position: relative; overflow: hidden; height: 100%; aspect-ratio: var(--ca); max-width: 100%; }
.crop img { position: absolute; left: 0; top: 0; width: calc(100% / var(--cw)); max-width: none; height: auto; aspect-ratio: 1200 / 630;
  transform: translate(calc(-100% * var(--cx)), calc(-100% * var(--cy))); opacity: 0; transition: opacity .7s var(--ease-out); }
.art.in img { opacity: 1; }
.art.none img { visibility: hidden; }
.art[data-game="chart"] img, .art.small[data-game="map"] img { filter: grayscale(1) contrast(2.2) brightness(1.05); mix-blend-mode: multiply; }
.art[data-game="chart"] { --ca: 1.5; --cw: .66; --cx: .34; --cy: .06; }
.art.small[data-game="chart"] { --ca: 1.09; --cw: .52; --cx: .46; --cy: .03; }
.art.big[data-game="map"] { padding: 14px 0; --ca: .92; --cw: .41; --cx: .555; --cy: .08; }
.art.small[data-game="map"] { --ca: 1.09; --cw: .42; --cx: .55; --cy: .12; }
.art.big[data-game="dot"] { padding: 14px 0; --ca: .62; --cw: .298; --cx: .672; --cy: .055; }
.art.big[data-game="map"] .crop, .art.big[data-game="dot"] .crop { border-radius: 4px; box-shadow: 0 0 0 1px rgba(18, 18, 18, .16); }
.art.small[data-game="dot"] { padding: 7px; }
.art .field { display: block; width: 100%; height: 100%; }
.art .globe { display: block; height: 88%; width: auto; }
.art.big .globe { height: 84%; }

/* Pay's drawn stub: a blank amount over the base / overtime / other bar,
   and at lead size the three lines it breaks into. */
.stub { display: flex; flex-direction: column; gap: .3em; width: 80%; padding: .45em .55em .5em; border-radius: .14em; background: #fff; box-shadow: 0 0 0 1px rgba(18, 18, 18, .14); font-size: 34px; }
.art.small .stub { width: 78%; font-size: 15px; }
.stub .rows { display: flex; flex-direction: column; font: 600 .4em/1.55 var(--text); color: var(--ink-2); }
.stub .rows span { display: flex; align-items: center; gap: .5em; border-top: 1px solid var(--hair); padding-top: .1em; }
.stub .rows i { width: .75em; height: .75em; border-radius: .15em; }
.stub .rows span:nth-child(1) i { background: #b0c4ef; } .stub .rows span:nth-child(2) i { background: #ba81c5; } .stub .rows span:nth-child(3) i { background: #f9df6d; }
.stub .rows em { margin-left: auto; font-style: normal; font-weight: 800; color: var(--ink); }
.art.small .stub .rows { display: none; }
.stub b { background: none; padding: 0; font: 700 1em/1 var(--slab); letter-spacing: .02em; }
.stub .bar { display: flex; height: .3em; border-radius: .06em; overflow: hidden; }
.stub .bar i:nth-child(1) { flex: 55; background: #b0c4ef; }
.stub .bar i:nth-child(2) { flex: 37; background: #ba81c5; }
.stub .bar i:nth-child(3) { flex: 8; background: #f9df6d; }

.play { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 24px; border-radius: 999px; background: var(--ink); color: #fff; font: 700 15px/1 var(--text); text-decoration: none; flex: none; transition: background-color .15s; }
.play:hover { background: #33363b; }
.play.ghost { height: 36px; padding: 0 14px; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); font-size: 14px; }
.play.ghost:hover { background: var(--game); }
/* A game you've finished today: its color, with a tick. */
.play.is-done, .play.is-done:hover { background: var(--game); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.play svg { width: 16px; height: 16px; margin: 0 6px 0 -2px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

.lead { margin-top: 18px; }
.lead-art, .item-art { display: block; text-decoration: none; }
.lead-text { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 12px; }
.lead h2 { font: 700 28px/1.05 var(--slab); letter-spacing: -.01em; }

/* Two equal columns on a phone (four games under the lead), split by a column
   rule centred in the gap, rows split by a hairline. */
.rest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 19px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair); }
.item { position: relative; display: flex; flex-direction: column; }
.item:nth-child(even)::before { content: ""; position: absolute; top: 0; bottom: 0; left: -10px; border-left: 1px solid var(--hair); }
.item:nth-child(n+3) { padding-top: 16px; border-top: 1px solid var(--hair); }
.item:nth-child(n+3)::before { top: 16px; }
.item h3 { margin-top: 8px; font: 700 16px/1.2 var(--slab); }
.item .nt { display: block; }
.item .meta { margin-top: 3px; font-size: 12.5px; }
.item .line { display: none; }
.item .play { margin-top: auto; align-self: stretch; }
.item-text { margin-bottom: 10px; }

.next { margin-top: 18px; text-align: center; font-size: 14px; color: var(--ink-2); }
.next b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- yesterday, set as an index line ---------- */
.index { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 26px; padding: 11px 0 12px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hair); }
.index h2 { font: 800 11.5px/1.6 var(--text); letter-spacing: .06em; text-transform: uppercase; }
.index ul { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14.5px; }
.index a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; font-variant-numeric: tabular-nums; }
.index a:hover { text-decoration-color: var(--ink); }
.index i { width: 9px; height: 9px; border-radius: 2px; background: var(--game); }
.plain li { padding: 10px 0; border-bottom: 1px solid var(--hair); }

/* ---------- about: the "?" on the dateline opens the colophon ---------- */
.dateline { align-items: center; }
.about { display: grid; place-items: center; width: 28px; height: 28px; margin: -6px -4px -6px 0; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.about svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.about:hover { color: var(--ink-2); }
#about .colophon { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
#about nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; font-size: 14px; }
#about nav a { color: var(--sd-link); text-underline-offset: 3px; }

/* ---------- wider screens: ears on the nameplate, the lead left, the other three down the right ---------- */
@media (min-width: 900px) {
  .plate { padding-top: 30px; }
  .plate-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; }
  .ear { display: block; font: 800 11.5px/1.45 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
  .ear.right { text-align: right; }
  .ear b { color: var(--ink); font-size: 22px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
  .nameplate { justify-self: center; }
  .dateline { margin-top: 20px; }
  .edition { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 36px; margin-top: 28px; }
  .lead { margin-top: 0; }
  .lead h2 { font-size: 36px; }
  .lead .meta { font-size: 15px; }
  .art.big[data-game="map"], .art.big[data-game="dot"] { padding: 22px 0; }
  .rest { display: block; margin-top: 0; padding: 0 0 0 32px; border-top: 0; border-left: 1px solid var(--hair); }
  .item { display: grid; grid-template-columns: 136px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--hair); }
  .item::before { display: none; }
  .item:nth-child(n+3) { padding-top: 16px; border-top: 0; }
  .item .nt { display: inline; }
  .art.big .stub { font-size: 50px; }
  .art.big[data-game="pay"] .stub { width: 72%; }
  .item:first-child { padding-top: 0; }
  .item:last-child { border-bottom: 0; padding-bottom: 0; }
  .item h3 { margin-top: 0; font-size: 21px; }
  .item .meta { font-size: 13.5px; }
  .item .line { display: block; margin-top: 3px; font-size: 14px; color: var(--ink-2); }
  .item .play { margin-top: 0; align-self: center; }
  .next { display: none; }
  .index { margin-top: 32px; }
}

/* ---------- 404 ---------- */
.lost { padding-top: 64px; text-align: center; }
.lost h1 { font: 700 34px/1.1 var(--slab); }
.lost p { margin: 10px 0 24px; color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  .crop img, .play { transition: none; }
}