/* Page shell, nav and headline. Tokens come from tokens.css. */

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

/* Keep in-page anchors clear of the 56px sticky nav, and glide to them unless motion is reduced. */
html { scroll-padding-top: calc(var(--spacing) * 14); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; }

/* The 1.4x radius tokens assume squircle corners; without this they look too round. */
.hero, .btn-nav {
  corner-shape: superellipse(var(--squircle-factor));
}

.page { padding: calc(var(--spacing) * 4) calc(var(--spacing) * 4) 0; }

.hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-3xl);
  background: var(--muted) url(assets/sky-dawn.webp) center / cover;
  box-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
}

/* Nav */
.nav {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--spacing) * 14);
  padding: 0 calc(var(--spacing) * 4);
  font-family: var(--font-display);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  color: var(--primary);
  font-size: 1.375rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: -.01em;
}
.logo img { width: 28px; height: 28px; }

.nav-links {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  display: flex;
  gap: calc(var(--spacing) * 10);
  list-style: none;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  border: 1px solid transparent;
  background-color: var(--primary);
  background-clip: padding-box;
  color: var(--primary-foreground);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  transition: background-color var(--default-transition-duration);
}
.btn:hover { background-color: color-mix(in oklab, var(--primary) 80%, transparent); }
.btn:active { scale: .95; }

.btn-nav {
  height: calc(var(--spacing) * 9);
  padding: 0 calc(var(--spacing) * 2.5);
  border-radius: var(--radius-xl);
  font-size: var(--text-sm);
}

/* Headline */
.intro {
  position: relative;
  z-index: 1;
  padding: calc(var(--spacing) * 10) 0 calc(var(--spacing) * 12);
  text-align: center;
}

/* Spec status above the headline: plain mono text, no outline. Underlines on hover. */
.spec-status {
  display: inline-block;
  margin-bottom: calc(var(--spacing) * 4);
  color: color-mix(in oklab, var(--primary) 60%, transparent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .02em;
  text-underline-offset: 3px;
}
.spec-status span { opacity: .45; }
.spec-status:hover { color: var(--primary); text-decoration: underline; }

.headline {
  margin-bottom: calc(var(--spacing) * 6);
  color: var(--primary);
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-normal);
  line-height: calc(var(--spacing) * 10);
  letter-spacing: -.01em;
}

.btn-hero {
  height: calc(var(--spacing) * 10);
  padding: 0 calc(var(--spacing) * 3);
  border-radius: 999px;
  font-size: var(--text-base);
  font-weight: 450;
}
.btn-hero img { width: 16px; height: 16px; filter: invert(1); }

@media (min-width: 48rem) {
  .headline { font-size: 2.75rem; line-height: calc(var(--spacing) * 12); }
}
@media (min-width: 80rem) {
  .headline { font-size: var(--text-5xl); line-height: calc(var(--spacing) * 13); }
}
@media (max-width: 47.99rem) {
  .nav-links, .btn-nav { display: none; }
  .intro { padding-inline: calc(var(--spacing) * 8); text-align: left; }
}

/* The hero already has a "Read Spec on GitHub" button, so the nav one only shows in the sticky nav.
   Hidden rather than removed so the centered links keep their place. */
.hero .nav .btn-nav { visibility: hidden; }