:root {
  --ink: #000000;
  --paper: #ffffff;
  --line: #000000;
}

* { box-sizing: border-box; }

html { min-width: 320px; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "DM Sans", sans-serif;
}

.page-shell {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
}

.footer {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 2rem;
  padding: 1.25rem clamp(1.5rem, 5vw, 4rem);
}

.brand { display: block; width: min(150px, 36vw); }
.brand img { display: block; width: 100%; height: auto; }

.socials {
  display: flex;
  gap: clamp(1rem, 4vw, 1.8rem);
}

.socials a { display: block; line-height: 0; }
.socials a:focus-visible { outline: 2px solid var(--line); outline-offset: 5px; }
.socials img { width: 24px; height: 24px; object-fit: contain; }

.message {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(12rem, 34vh, 18rem) 1.5rem 1.5rem;
  text-align: center;
}

h1 {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(3.4rem, 12vw, 7rem);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
}

.message p {
  margin: 1rem 0 0;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .22em;
}

@media (max-width: 700px) {
  .footer { padding-bottom: 1rem; }
  .brand { width: min(130px, 35vw); }
  .socials { gap: 1rem; }
  .socials img { width: 22px; height: 22px; }
  .message { padding-top: 34vh; }
}