/* The pre-launch lander (spec 13.10). One page, no script, no inline style: the content
   security policy in _headers is the site's. Tokens, type roles, link and focus rules are the
   site's (spec 6.2, 6.3), copied here because the lander is not part of the Astro build.
   Fonts are the same instanced files as the site, copied by scripts/copy-lander-assets.mjs. */

@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-var.woff2') format('woff2');
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces Fallback';
  src: local('Georgia');
  font-style: normal;
  size-adjust: 125.581%;
  ascent-override: 77.878%;
  descent-override: 20.306%;
  line-gap-override: 0.000%;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/plex-sans-var.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Fallback';
  src: local('Arial');
  font-style: normal;
  size-adjust: 134.117%;
  ascent-override: 76.426%;
  descent-override: 20.505%;
  line-gap-override: 0.000%;
}

:root {
  --paper: #F5F2EC;
  --slate: #101418;
  --grey: #575D66;
  --indigo-80: #2C3C80;
  --indigo-60: #4359A6;
  --indigo-20: #9FAED6;
  --saffron: #D98F26;
  --family-heading: Fraunces, 'Fraunces Fallback', Georgia, serif;
  --family-body: 'IBM Plex Sans', 'IBM Plex Sans Fallback', Arial, sans-serif;
  --size-heading-1: clamp(2.25rem, 3vw + 1.5rem, 3.5rem);
  --size-copy: 1.125rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --motion-fast: 150ms;
}

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

html {
  font-size: 100%;
  color-scheme: light;
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
  /* Documentation only: weight is set with font-weight, never font-variation-settings. */
  font-variation-settings: "WONK" 0, "SOFT" 0;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--slate);
  font-family: var(--family-body);
  font-size: var(--size-copy);
  line-height: 1.6;
  font-weight: 400;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  display: flex;
  flex-direction: column;
}

h1, p {
  margin: 0;
}

img, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Centred single column, 36 rem wide, 16 px side gutters; everything left-aligned inside it so
   the page reads as the site's typography, not a splash page (spec 13.10). */
.lander {
  flex: 1 0 auto;
  width: 100%;
  max-width: calc(36rem + 2rem);
  margin: auto;
  padding: var(--space-8) var(--space-4);
}

/* The horizontal colour lockup, the mark to the left of the wordmark, sized by its mark at
   64 px (the mark is the lockup's full height, so the lockup is 312 by 64 px) with the mark's
   clear space, a quarter of its width (16 px), on every side as margin. Below a 344 px
   viewport the column is narrower than the lockup, so it scales down with the column rather
   than scroll (288 px wide at 320 px, the mark 59 px). */
.lander__lockup {
  width: 312px;
  max-width: 100%;
  height: auto;
  margin: 16px 16px 16px 0;
}

/* heading-1: Fraunces Light, optical size following the rendered size, WONK 0 from the root. */
.lander__title {
  font-family: var(--family-heading);
  font-optical-sizing: auto;
  font-size: var(--size-heading-1);
  line-height: 1.1;
  font-weight: 300;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--slate);
  margin-block-start: var(--space-7);
}

.lander__copy {
  font-size: var(--size-copy);
  line-height: 1.6;
  max-width: 65ch;
  text-wrap: pretty;
}
.lander__title + .lander__copy {
  margin-block-start: calc(0.5 * 1.6 * 1em);
}
.lander__copy + .lander__copy {
  margin-block-start: 1em;
}
@media (max-width: 40em) {
  .lander__copy {
    hyphens: auto;
  }
}

/* Links: Indigo 80, 1 px underline with a 3 px offset; hover Indigo 60, 2 px; visited Indigo 60. */
a {
  color: var(--indigo-80);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: auto;
  transition: color var(--motion-fast) ease, text-decoration-thickness var(--motion-fast) ease;
}
a:visited {
  color: var(--indigo-60);
}
a:hover {
  color: var(--indigo-60);
  text-decoration-thickness: 2px;
}

/* Tertiary link: text with an arrow that moves 4 px to the right on hover (spec 6.5 Button). */
.lander__tertiary {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
}
.lander__arrow {
  display: inline-block;
  transition: transform var(--motion-fast) ease;
}
.lander__tertiary:hover .lander__arrow {
  transform: translateX(4px);
}

::selection {
  background: var(--indigo-20);
  color: var(--slate);
}

/* Focus: :focus-visible only; the outline survives forced colours; the halo is saffron's job. */
:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--indigo-80);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px var(--saffron);
  border-radius: 0.125rem;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --grey: var(--slate);
  }
}

@media (forced-colors: active) {
  :focus-visible {
    outline: 3px solid CanvasText;
    box-shadow: none;
  }
}