/*
  Typography and layout from Figma file "hyperplace", page "dotorg"
  (frames Mobile 390 / Tablet 768 / Desktop 1440, read 2026-09-16).
  Structure, type (Archivo), the black/white/#00FF00 palette and the
  single hairline rule are taken from it. Sizing is NOT: the founder
  asked (2026-09-16) to use mobile's 21px/weight-300 across every
  breakpoint instead of the 48px/weight-200 the tablet and desktop
  frames specify. See STATUS.md for the fuller design notes.
*/

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 200;
  src: url('/fonts/archivo-200.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300;
  src: url('/fonts/archivo-300.woff2') format('woff2');
  font-display: swap;
}

:root {
  --bg: #ffffff;
  --fg: #000000;
  --accent: #00ff00;
  --rule: #000000;
  --content-width: 798px;
  --gutter: 10px;
  --font: 'Archivo', ui-sans-serif, system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-weight: 300;
  font-variation-settings: 'wdth' 100;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: calc(var(--content-width) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.site-header {
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wordmark {
  display: block;
  font-size: 21px;
  font-weight: 300;
  line-height: 1;
  color: var(--fg);
  text-decoration: none;
}

.home-link {
  display: block;
  font-size: 21px;
  font-weight: 300;
  line-height: 1;
  color: var(--accent);
  text-decoration: none;
}

.home-link:hover,
.home-link:focus-visible {
  text-decoration: underline;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.lede {
  font-size: 21px;
  font-weight: 300;
  line-height: 1.5;
  margin: 0 0 32px;
  max-width: 60ch;
}

.rule {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 0 0 16px;
}

.site-footer {
  padding-bottom: 32px;
  font-size: 21px;
  font-weight: 300;
  line-height: 1.3;
}

/*
  Tablet and desktop deliberately reuse mobile's type size, weight and
  spacing as-is (founder's call, 2026-09-16) rather than the larger 48px
  Archivo ExtraLight the Figma frames specify for those breakpoints — see
  STATUS.md. Only the container's side padding and max column width scale
  up, so line length stays readable on wider screens.
*/
@media (min-width: 768px) {
  :root {
    --gutter: 20px;
  }
}

@media (min-width: 1440px) {
  :root {
    --gutter: 50px;
  }
}