/* The page is the printed card: white, the logo fills the screen and the contact details sit at the bottom */
:root {
  --bg: #fff;
  --text: #237a45;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: clamp(1rem, 0.9rem + 0.6vw, 1.35rem)/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

::selection { background: var(--text); color: var(--bg); }

a { color: inherit; text-decoration: none; }

/* Takes every bit of height the contact block leaves; the logo scales inside it */
.logo {
  flex: 1;
  position: relative;
  min-height: 16rem;
  margin: clamp(1rem, 4vh, 3rem) 1rem 0;
}

.logo h1 { margin: 0; }

/* The SVG keeps its proportions by itself (preserveAspectRatio defaults to "meet") */
.logo svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.contact {
  padding: clamp(1rem, 4vh, 3rem) 1rem max(clamp(1rem, 4vh, 3rem), env(safe-area-inset-bottom));
}

.contact address {
  display: grid;
  gap: 0.6em;
  justify-items: center;
  font-style: normal;
  text-align: center;
}

.contact p { margin: 0; }

.not-found {
  margin: auto;
  padding: 1rem;
  text-align: center;
}