/* Yetto
   One centered column on white. Change the colors and fonts here. */
:root {
  --ink: #000;
  --brand: #a700a0;
  --muted: #555;
  --paper: #fff;
  --sans: "Inter", system-ui, sans-serif;
  --body: "Lato", system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 18px/1.6 var(--body); overflow-wrap: break-word; }
img { display: block; max-width: 100%; }

main { max-width: 680px; margin: 0 auto; padding: clamp(3rem, 11vh, 7rem) 1.25rem 3rem; text-align: center; }

h1 { margin: 0 0 1.5rem; font: 800 clamp(4rem, 15vw, 8rem)/1 var(--sans); letter-spacing: -.04em; text-transform: uppercase; color: var(--brand); }

.message p { margin: 0 0 1rem; }

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand); }

/* Founders: a row of three, which wraps to a column on narrow screens */
.founders { list-style: none; margin: 2.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem 3rem; }
.founders li { width: 150px; }
.founders img { width: 112px; height: 112px; margin: 0 auto .75rem; border-radius: 50%; object-fit: cover; }
.founders h2 { margin: 0 0 .15rem; font: 500 1rem/1.3 var(--sans); }
.founders p { margin: 0; font-size: .95rem; line-height: 1.5; }