/* 8play.dev: a scorekeeper's sheet. Ink on cool paper, one ballpoint blue used only for marks. */

@font-face {
  font-family: "Big Shoulders Display";
  src: url("/fonts/BigShouldersDisplay.woff2") format("woff2");
  font-weight: 800 900;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/HankenGrotesk.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --paper: #eef0f1;
  --ink: #121417;
  --mute: #565c64;
  --line: rgb(18 20 23 / 0.16);
  --blue: #2234e8;
  --display: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue", sans-serif;
  --text: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --wrap: 68rem;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--ink) var(--paper); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--text);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
::selection { background: var(--blue); color: var(--paper); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
a { color: inherit; text-decoration-color: var(--blue); text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
a:hover { color: var(--blue); }
img { display: block; max-width: 100%; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.9em; }

.skip { position: absolute; left: var(--gutter); top: -4rem; background: var(--ink); color: var(--paper); padding: 0.5rem 0.9rem; z-index: 10; }
.skip:focus { top: 0.75rem; }
.skip:hover { color: var(--paper); }

/* header + footer */
.top, .foot, main { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: 1.25rem; }
.mark { display: inline-flex; align-items: center; gap: 0.625rem; font: 900 2rem/1 var(--display); letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; }
.studio-logo { width: 3rem; height: 2rem; flex: none; image-rendering: pixelated; }
.mark:hover { color: var(--ink); }
.top nav, .foot nav { display: flex; gap: 1.5rem; }
.top nav a, .foot nav a { text-decoration: none; font-weight: 500; }
.top nav a:hover, .foot nav a:hover { text-decoration: underline; text-decoration-color: var(--blue); }
main { flex: 1; }
.foot { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between; padding-block: 2.5rem 2rem; margin-top: 5rem; border-top: 2px solid var(--ink); color: var(--mute); font-size: 0.9375rem; }
.foot p { margin: 0; }
.foot nav a { color: var(--ink); }

/* type */
h1, h2 { font-family: var(--display); font-weight: 900; text-transform: uppercase; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(3.25rem, 9.5vw, 6rem); line-height: 0.92; letter-spacing: -0.005em; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.25rem); line-height: 1; font-weight: 800; letter-spacing: 0.005em; }
.lede { font-size: clamp(1.1875rem, 2.2vw, 1.4375rem); line-height: 1.5; max-width: 38em; margin: 1.25rem 0 0; text-wrap: pretty; }
.big { font: 800 clamp(2rem, 6vw, 3.5rem)/1 var(--display); margin: 1.25rem 0 0; }
.big a { text-decoration-thickness: 3px; text-underline-offset: 0.12em; text-decoration-skip-ink: none; }
.note { color: var(--mute); margin: 0.75rem 0 0; max-width: 34em; }

/* home */
.hero { padding-block: clamp(1.5rem, 5vw, 4rem) clamp(1.5rem, 3.5vw, 2.5rem); }
.hero h1 { max-width: 11em; }
.studio-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: 2rem; }
.studio-intro { min-width: 0; }
.studio-hero h1 { font-size: clamp(3.25rem, 7vw, 5.5rem); max-width: 9em; }
.studio-hero .lede { max-width: 29em; }
.studio-note { color: var(--mute); max-width: 36em; margin: 1rem 0 0; }
.studio-links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; margin-top: 1.5rem; font-weight: 600; }
.studio-links a { display: inline-flex; align-items: center; gap: 0.5rem; }
.studio-links a:hover .go { stroke: var(--blue); }
.studio-art { position: relative; width: 100%; max-width: 28rem; aspect-ratio: 224 / 200; align-self: center; image-rendering: pixelated; }
.studio-art img { width: 100%; height: 100%; }
.studio-film { position: absolute; inset: 0; background: url('/assets/studio-dev-sheet.png') 0 0 / 1200% 100% no-repeat; animation: studio-type 3.6s steps(11) forwards; }
.studio-hero:hover .studio-film, .studio-hero:focus-within .studio-film { animation-name: studio-type-replay; }
@keyframes studio-type { to { background-position: 100% 0; } }
@keyframes studio-type-replay { to { background-position: 100% 0; } }
.studio-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 2rem; padding-top: 0.5rem; }
.studio-statement { font: 800 clamp(1.75rem, 3vw, 2.5rem)/1.15 var(--display); margin: 0; }
.studio-story { max-width: 42em; }
.studio-story p { margin: 0 0 1rem; text-wrap: pretty; }
.studio-story p:last-child { margin-bottom: 0; }

.block { margin-top: clamp(2.5rem, 6vw, 4rem); border-top: 2px solid var(--ink); padding-top: 1rem; }
.shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; min-height: 3rem; margin-bottom: 1rem; }

.tally { height: 2.75rem; width: auto; overflow: visible; flex: none; }
.tally path { fill: none; stroke: var(--blue); stroke-width: 3.25; stroke-linecap: round; stroke-dasharray: 1; animation: draw 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.apps { list-style: none; margin: 0; padding: 0; }
.apps li + li { border-top: 1px solid var(--line); }
.app {
  display: grid;
  grid-template-columns: 4rem 1fr auto 1.25rem;
  align-items: center;
  gap: 0 1.5rem;
  padding-block: 1.25rem;
  text-decoration: none;
  color: var(--ink);
}
.app-main { display: grid; gap: 0.125rem; }
.app-name { font: 900 clamp(2rem, 5vw, 3rem)/1 var(--display); text-transform: uppercase; }
.app-line { color: var(--mute); }
.app-meta { display: grid; gap: 0.125rem; justify-items: end; text-align: right; font-size: 0.9375rem; }
.status { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.plat { color: var(--mute); }
.go { width: 1.25rem; height: 1.25rem; fill: none; stroke: var(--ink); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), stroke 0.15s; }
.app:hover .app-name, .app:focus-visible .app-name { color: var(--blue); }
.app:hover .go, .app:focus-visible .go { transform: translateX(0.35rem); stroke: var(--blue); }

.dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; flex: none; border: 2px solid var(--ink); }
.dot-live { background: var(--ink); }
.dot-review { background: var(--blue); border-color: var(--blue); }
.dot-development { background: transparent; }

/* sprites: still by default, animated on hover or focus, and never animated under reduced motion */
.sprite { display: grid; flex: none; image-rendering: pixelated; }
.sprite img { grid-area: 1 / 1; image-rendering: pixelated; }
.sprite .anim { visibility: hidden; }
.sprite-s { width: 4rem; height: 4rem; justify-items: center; align-items: center; }
.sprite-s img { height: 4rem; width: auto; max-width: 4rem; object-fit: contain; }
.sprite-l { height: 12rem; justify-items: end; }
.sprite-l img { height: 12rem; width: auto; }
.app:hover .sprite .anim, .app:focus-visible .sprite .anim, .app-hero:hover .sprite .anim { visibility: visible; }
@media (hover: hover) { .app:hover .sprite .still, .app:focus-visible .sprite .still, .app-hero:hover .sprite .still { visibility: hidden; } }

.facts { margin: 0; }
.facts > div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding-block: 0.9rem; border-top: 1px solid var(--line); }
.facts > div:first-child { border-top: 0; }
.facts dt { font-weight: 700; }
.facts dd { margin: 0; max-width: 42em; text-wrap: pretty; }

/* app page */
.crumb { margin: 0.5rem 0 0; color: var(--mute); font-size: 0.9375rem; }
.crumb a { color: var(--ink); text-decoration: none; font-weight: 600; }
.crumb a:hover { text-decoration: underline; text-decoration-color: var(--blue); }
.app-hero { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2rem; padding-block: clamp(1.5rem, 5vw, 3.5rem) clamp(2rem, 5vw, 3rem); }
.status-line { display: flex; align-items: flex-start; gap: 0.6rem; margin: 1.5rem 0 0; max-width: 40em; }
.status-line .dot { margin-top: 0.5rem; }
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin: 1.5rem 0 0; }
.badge { display: block; line-height: 0; }
.badge img { height: 2.75rem; width: auto; }
.badge:hover img { opacity: 0.85; }
.plain { margin: 0; padding: 0; list-style: none; }
.plain li { padding-block: 0.75rem; border-top: 1px solid var(--line); }
.plain li span { display: block; max-width: 44em; text-wrap: pretty; }
.plain li:first-child { border-top: 0; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 2.5rem minmax(0, 44em); padding-block: 0.75rem; border-top: 1px solid var(--line); }
.steps li:first-child { border-top: 0; }
.steps li::before { content: counter(s); font: 900 1.5rem/1.3 var(--display); color: var(--ink); }

/* long-form pages */
.doc main { padding-top: clamp(1.5rem, 5vw, 3.5rem); }
.prose { max-width: 44rem; }
.prose h1 { margin-bottom: 0.75rem; }
.prose .meta { color: var(--mute); margin: 0 0 2rem; }
.prose h2 { margin: 3rem 0 0.75rem; padding-top: 1rem; border-top: 2px solid var(--ink); }
.prose h3 { font: 700 1.125rem/1.4 var(--text); margin: 1.75rem 0 0.25rem; }
.prose p, .prose li { text-wrap: pretty; }
.prose ul { padding-left: 1.25rem; }
.prose li { margin-block: 0.5rem; }
.prose li::marker { color: var(--blue); }
.prose :target { scroll-margin-top: 1.5rem; }

@media (max-width: 40rem) {
  .mark { font-size: 1.5rem; gap: 0.5rem; }
  .studio-logo { width: 2.25rem; height: 1.5rem; }
  .studio-hero { grid-template-columns: 1fr; gap: 1.5rem; }
  .studio-hero h1 { max-width: 10em; }
  .studio-art { max-width: 18rem; justify-self: center; }
  .studio-about { grid-template-columns: 1fr; gap: 1.25rem; }
  body { font-size: 1rem; }
  .top nav { gap: 1.1rem; }
  .app { grid-template-columns: 4rem 1fr; grid-template-areas: "s m" "s t"; gap: 0.25rem 1rem; align-items: start; }
  .app .sprite { grid-area: s; }
  .app-main { grid-area: m; }
  .app-meta { grid-area: t; justify-items: start; text-align: left; grid-auto-flow: column; gap: 0.25rem 0.75rem; }
  .go { display: none; }
  .facts > div { grid-template-columns: 1fr; gap: 0.15rem; }
  .app-hero { grid-template-columns: 1fr; }
  .app-hero .sprite-l { order: -1; height: 8rem; justify-self: start; }
  .app-hero .sprite-l img { height: 8rem; }
  .shead { align-items: center; }
  .tally { height: 2.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .studio-film { display: none; animation: none; }
  .tally path { animation: none; }
  .sprite .anim { display: none; }
  .sprite .still { visibility: visible !important; }
  .go { transition: none; }
}

/* generated: draw delays */
.tally path:nth-child(1){animation-delay:0.35s}
.tally path:nth-child(2){animation-delay:0.57s}
.tally path:nth-child(3){animation-delay:0.79s}
.tally path:nth-child(4){animation-delay:1.01s}
.tally path:nth-child(5){animation-delay:1.23s}
.tally path:nth-child(6){animation-delay:1.45s}
.tally path:nth-child(7){animation-delay:1.67s}
.tally path:nth-child(8){animation-delay:1.89s}
.tally path:nth-child(9){animation-delay:2.11s}
.tally path:nth-child(10){animation-delay:2.33s}
.tally path:nth-child(11){animation-delay:2.55s}
.tally path:nth-child(12){animation-delay:2.77s}
.tally path:nth-child(13){animation-delay:2.99s}
.tally path:nth-child(14){animation-delay:3.21s}
.tally path:nth-child(15){animation-delay:3.43s}
.tally path:nth-child(16){animation-delay:3.65s}
.tally path:nth-child(17){animation-delay:3.87s}
.tally path:nth-child(18){animation-delay:4.09s}
.tally path:nth-child(19){animation-delay:4.31s}
.tally path:nth-child(20){animation-delay:4.53s}