/*
 * Makings information site. Plain CSS, no build step, no remote fonts or assets.
 *
 * The colour, type, spacing and radius values below are a static copy of the design tokens in
 * packages/ui/src/tokens.ts (this site cannot import them). Purple is action (links, focus);
 * blue is information (the status notice). If the tokens change, update these by hand.
 */

:root {
  color-scheme: light dark;

  --background: #faf7f2;
  --surface: #fffdf9;
  --surface-muted: #f2eee7;
  --border: #e4ded3;
  --text-primary: #1d1a26;
  --text-secondary: #524c5e;
  --text-muted: #6b6577;
  --primary-text: #4e3fc4;
  --primary-subtle: #ece9fc;
  --info: #2a5bc0;
  --info-subtle: #e6eefc;
  --focus: #5b4bd1;

  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --space-xxxl: 40px;
  --space-huge: 48px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --content-max: 68rem;
  --text-max: 40rem;
  --touch-target: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #12131b;
    --surface: #1a1b26;
    --surface-muted: #1e2030;
    --border: #2e3144;
    --text-primary: #efedf6;
    --text-secondary: #b7b4c8;
    --text-muted: #9592a8;
    --primary-text: #a99ff8;
    --primary-subtle: #2a2552;
    --info: #8db2f7;
    --info-subtle: #1d2b47;
    --focus: #a99ff8;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--background);
  color: var(--text-primary);
  font: 400 1.0625rem / 1.3 var(--font-sans);
  overflow-wrap: break-word;
}

h1,
h2,
h3,
p,
ul {
  margin: 0;
}

a {
  color: var(--primary-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --- Skip link ------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: var(--space-md);
  top: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
}

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

/* --- Header and footer ----------------------------------------------------------------- */

.site-header,
.site-footer,
main {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding-left: var(--space-xl);
  padding-right: var(--space-xl);
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-xl);
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  color: var(--text-primary);
  font: 600 1.25rem / 1.25 var(--font-sans);
  text-decoration: none;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xxs);
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  padding: 0 var(--space-sm);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font: 600 0.9375rem / 1.33 var(--font-sans);
  text-decoration: none;
}

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

.site-nav a[aria-current="page"] {
  background: var(--primary-subtle);
  color: var(--primary-text);
}

main {
  flex: 1;
  padding-top: var(--space-xxxl);
  padding-bottom: var(--space-huge);
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-xl);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font: 400 0.8125rem / 1.38 var(--font-sans);
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding: 0;
  list-style: none;
}

.site-footer a {
  color: var(--text-secondary);
}

/* --- Text ------------------------------------------------------------------------------ */

.overline {
  color: var(--text-secondary);
  font: 600 0.8125rem / 1.38 var(--font-sans);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.page-title {
  font: 700 1.75rem / 1.21 var(--font-sans);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.display {
  max-width: 22ch;
  font: 700 2.125rem / 1.2 var(--font-sans);
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.lead {
  max-width: var(--text-max);
  color: var(--text-secondary);
  font-size: 1.1875rem;
  line-height: 1.4;
  text-wrap: pretty;
}

.section-title {
  font: 600 1.25rem / 1.25 var(--font-sans);
}

.prose {
  max-width: var(--text-max);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  line-height: 1.45;
}

.prose h2 {
  margin-top: var(--space-xl);
}

.prose ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-left: var(--space-xl);
}

.meta {
  color: var(--text-muted);
  font-size: 0.9375rem;
}

/* --- Home ------------------------------------------------------------------------------ */

.hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.notice {
  max-width: var(--text-max);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--info);
  border-radius: var(--radius-md);
  background: var(--info-subtle);
  line-height: 1.45;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-xl);
  padding: 0;
  list-style: none;
}

.feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-xl);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.feature-icon {
  display: inline-grid;
  place-items: center;
  width: var(--touch-target);
  height: var(--touch-target);
  margin-bottom: var(--space-xxs);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  color: var(--text-primary);
}

.feature h3 {
  font: 600 1.0625rem / 1.3 var(--font-sans);
}

.feature p {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.4;
  text-wrap: pretty;
}

.section {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-huge);
}

.text {
  max-width: var(--text-max);
  color: var(--text-secondary);
  line-height: 1.45;
  text-wrap: pretty;
}

/* --- Contact --------------------------------------------------------------------------- */

.contact-card {
  max-width: var(--text-max);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-xl);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.contact-address {
  font: 600 1.25rem / 1.25 var(--font-sans);
  word-break: break-word;
}

/* --- Narrow screens -------------------------------------------------------------------- */

@media (max-width: 767px) {
  .site-header,
  .site-footer,
  main {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  .site-nav a {
    padding: 0 var(--space-xs);
  }

  main {
    padding-top: var(--space-xl);
  }

  .display {
    font-size: 1.75rem;
    line-height: 1.21;
  }

  .features {
    grid-template-columns: 1fr;
  }
}