/* ---------------------------------------------------------------
   Lanespace — placeholder
   Palette and type per lanespace-brand-handoff.md v0.2, 6 Oct 2026.
   --------------------------------------------------------------- */

:root {
  --carbon:   #101314;   /* text, logo, dark sections */
  --graphite: #4A5357;   /* secondary text */
  --fog:      #B7BFBD;   /* rules and captions on carbon */
  --line:     #E1E6E4;   /* borders, dividers */
  --paper:    #F6F8F7;   /* page background */
  --white:    #FFFFFF;
  --chlorine: #2DD4A7;   /* the one accent */
  --deep:     #0A7560;   /* links and accent text on light */

  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--white);
  background: var(--carbon);
  -webkit-font-smoothing: antialiased;
}

.wrap {
  width: 100%;
  max-width: 800px;
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 6vw, 2.5rem);
}

main {
  flex: 1;
  display: flex;
  align-items: center;
  padding-block: clamp(4rem, 14vh, 8rem);
}

/* ---------- logo ----------
   Clear space on all sides is half the tile height.
   Tile is 48 units tall in a 48-unit-high viewBox, so at a rendered
   height of 32px the clear space is 16px. */

.mark {
  display: inline-block;
  line-height: 0;
  margin-bottom: 16px;
}

.mark svg {
  display: block;
  width: 173px;    /* 32px tall; well above the 100px minimum width */
  height: auto;
}

/* ---------- type ---------- */

h1 {
  margin: clamp(2.25rem, 6vh, 3.25rem) 0 0;
  font-size: clamp(1.75rem, 4.4vw, 2.625rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.01em;
  max-width: 21ch;
}

.sub {
  margin: 1.5rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--fog);
  max-width: 46ch;
}

/* Chlorine may be text on carbon. */
.contact {
  display: inline-block;
  margin-top: clamp(2.5rem, 7vh, 3.5rem);
  font-size: 1.0625rem;
  color: var(--chlorine);
  text-decoration: none;
  border-bottom: 1px solid rgba(45, 212, 167, 0.4);
  padding-bottom: 0.1875rem;
}

.contact:hover { border-bottom-color: var(--chlorine); }

/* ---------- footer ---------- */

footer {
  border-top: 1px solid rgba(183, 191, 189, 0.18);
  padding-block: 1.75rem 2.25rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--fog);
}

footer p { margin: 0; }