/*
 * Written Shared First: declarations outside a media query apply at every
 * viewport width. Anything that differs between small and large screens
 * lives in the two bounded queries at the end of the file.
 */

:root {
  --color-ink: #0e1525;
  --color-ink-raised: #263049;
  --color-ink-muted: #3b4557;
  --color-ink-subtle: #556070;
  --color-ink-faint: #8a93a3;
  --color-rule: #e3e6ec;
  --color-surface: #fff;
  --color-surface-sunken: #f6f7f9;
  --color-highlight: #f7f24a;
  --color-link: #0b5fd6;
  --color-link-hover: #063f91;

  --font-sans: "Geist", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale. Body copy is --font-size-m; the hero heading grows with the
     viewport between 2rem and 3.5rem. */
  --font-size-xs: 0.8125rem;
  --font-size-s: 0.875rem;
  --font-size-m: 1.0625rem;
  --font-size-l: 1.25rem;
  --font-size-xl: 1.625rem;
  --font-size-xxl: clamp(2rem, 1.2rem + 3.4vw, 3.5rem);

  --border-hairline: 0.0625rem solid var(--color-rule);

  --radius-small: 0.625rem;
  --radius-large: 0.875rem;

  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-sans);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

a {
  color: var(--color-link);
}

a:hover {
  color: var(--color-link-hover);
}

:focus-visible {
  outline: 0.125rem solid var(--color-link);
  outline-offset: 0.1875rem;
}

h1,
h2,
p,
pre {
  margin: 0;
}

code,
kbd,
pre {
  font-family: var(--font-mono);
}

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  padding-block: 0.5rem;
  padding-inline: 0.875rem;
  border-radius: var(--radius-small);
  background-color: var(--color-ink);
  color: var(--color-surface);
  font-weight: 500;
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: none;
}

/* The skip link moves focus to <main> (tabindex="-1"), which then sits at the
   top of the screen. It is not a control, so it needs no focus ring. */
main:focus {
  outline: none;
}

.page {
  max-inline-size: 57.5rem;
  margin-inline: auto;
}

/* Header */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding-block: 1.75rem;
  border-block-end: var(--border-hairline);
  font-family: var(--font-mono);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--color-ink);
  font-size: var(--font-size-m);
  font-weight: 600;
  text-decoration: none;
}

.wordmark:hover {
  color: var(--color-ink);
}

/* The link lists in the header and footer navigation. */
.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav {
  font-size: var(--font-size-s);
}

.site-nav a {
  color: var(--color-ink-muted);
}

.site-nav a:hover {
  color: var(--color-ink);
}

/* Hero */

.hero h1 {
  font-family: var(--font-mono);
  font-size: var(--font-size-xxl);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.highlight {
  padding-inline: 0.12em;
  background-color: var(--color-highlight);
}

.lede {
  max-inline-size: 40rem;
  margin-block-start: 1.75rem;
  color: var(--color-ink-muted);
  font-size: var(--font-size-l);
}

.keys {
  display: flex;
  flex-wrap: wrap;
}

/*
 * The key's depth is a solid shadow rather than a thick bottom border, so a
 * press can move the key down onto its shadow with a transform and change
 * nothing in the layout around it. Its glyph sizes, in the media queries
 * below, are part of the key drawing rather than steps of the type scale.
 */
.key {
  --key-depth: 0.375rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0.125rem solid var(--color-ink);
  border-radius: 1rem;
  box-shadow: 0 var(--key-depth) 0 var(--color-ink);
  background-color: var(--color-surface);
  color: var(--color-ink);
  line-height: 1;
}

.key-accent {
  background-color: var(--color-highlight);
  font-weight: 600;
}

/*
 * Two seconds after the page loads, the keys go down one after another, the
 * way fingers press the shortcut, then all four come back up together.
 * key-press holds the pressed position (`forwards`) until key-release, which
 * comes later in the list and so wins once it starts, lifts the key back up.
 */
@media (prefers-reduced-motion: no-preference) {
  .key {
    animation:
      key-press 90ms ease-out var(--key-press-delay) forwards,
      key-release 180ms ease-in 2.8s forwards;
  }

  .key:nth-child(1) {
    --key-press-delay: 2s;
  }

  .key:nth-child(2) {
    --key-press-delay: 2.12s;
  }

  .key:nth-child(3) {
    --key-press-delay: 2.24s;
  }

  .key:nth-child(4) {
    --key-press-delay: 2.36s;
  }
}

@keyframes key-press {
  to {
    box-shadow: 0 0 0 var(--color-ink);
    transform: translateY(var(--key-depth));
  }
}

@keyframes key-release {
  from {
    box-shadow: 0 0 0 var(--color-ink);
    transform: translateY(var(--key-depth));
  }

  to {
    box-shadow: 0 var(--key-depth) 0 var(--color-ink);
    transform: none;
  }
}

.keys-caption {
  margin-block-start: 1.125rem;
  color: var(--color-ink-subtle);
  font-family: var(--font-mono);
  font-size: var(--font-size-s);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-block-start: 3rem;
}

.hero-meta {
  color: var(--color-ink-subtle);
  font-family: var(--font-mono);
  font-size: var(--font-size-s);
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-block-size: 3.25rem;
  padding-inline: 1.5rem;
  border-radius: var(--radius-small);
  background-color: var(--color-ink);
  color: var(--color-surface);
  font-size: var(--font-size-m);
  font-weight: 500;
  text-decoration: none;
}

.button:hover {
  background-color: var(--color-ink-raised);
  color: var(--color-surface);
}

/* Sections */

.section h2 {
  font-family: var(--font-mono);
  font-size: var(--font-size-xl);
  font-weight: 500;
  line-height: 1.3;
}

.heading-marker {
  color: var(--color-ink-faint);
}

.prose {
  max-inline-size: 40rem;
  margin-block-start: 1rem;
  color: var(--color-ink-muted);
  font-size: var(--font-size-m);
}

.prose code {
  font-size: 0.9375em;
}

.section .button {
  margin-block-start: 1.5rem;
}

.file-list {
  margin-block: 1.75rem 0;
  padding-block: 1.375rem;
  padding-inline: 1.625rem;
  border: var(--border-hairline);
  border-radius: var(--radius-large);
  background-color: var(--color-surface-sunken);
  color: var(--color-ink-subtle);
  font-family: var(--font-mono);
  line-height: 2.1;
  list-style: none;
}

.file-list .is-ticked {
  color: var(--color-ink);
}

.is-ticked .checkbox {
  font-weight: 600;
}

.steps,
.requirements {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-block: 1.5rem 0;
  padding-inline-start: 1.6em;
  color: var(--color-ink-muted);
  font-size: var(--font-size-m);
}

.steps strong {
  color: var(--color-ink);
  font-weight: 600;
}

.code-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-block-start: 2rem;
}

.code-heading .prose {
  margin-block-start: 0;
}

.code-block {
  overflow-x: auto;
  margin-block-start: 0.75rem;
  padding-block: 1.25rem;
  padding-inline: 1.5rem;
  border: var(--border-hairline);
  border-radius: var(--radius-large);
  background-color: var(--color-surface-sunken);
  line-height: 1.9;
}

.copy-button {
  min-block-size: 2.75rem;
  padding-inline: 0.875rem;
  border: var(--border-hairline);
  border-radius: var(--radius-small);
  background-color: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 500;
  cursor: pointer;
}

.copy-button:hover {
  border-color: var(--color-ink-faint);
}

/* Footer */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-block: 1.75rem 3rem;
  border-block-start: var(--border-hairline);
  color: var(--color-ink-subtle);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
}

/* Small screens: phones in portrait */

@media (width < 40rem) {
  .page {
    padding-inline: 1.25rem;
  }

  .hero {
    padding-block-start: 3.5rem;
  }

  .keys {
    gap: 0.625rem;
    margin-block-start: 2.5rem;
  }

  .key {
    inline-size: 3.75rem;
    block-size: 3.75rem;
    font-size: 1.75rem;
  }

  .section {
    padding-block-start: 4.5rem;
  }

  .section-last {
    padding-block-end: 5rem;
  }

  .file-list,
  .code-block {
    font-size: var(--font-size-xs);
  }
}

/* Larger screens: tablets and up */

@media (width >= 40rem) {
  .page {
    padding-inline: 1.75rem;
  }

  .hero {
    padding-block-start: 5.5rem;
  }

  .keys {
    gap: 0.875rem;
    margin-block-start: 3.5rem;
  }

  .key {
    inline-size: 6.5rem;
    block-size: 6.5rem;
    font-size: 2.75rem;
  }

  .section {
    padding-block-start: 7rem;
  }

  .section-last {
    padding-block-end: 7.5rem;
  }

  .file-list,
  .code-block {
    font-size: var(--font-size-s);
  }
}