:root {
  font-size: 16px;

  --page-bg: rgb(130, 208, 244);
  --card-bg: rgb(255, 250, 232);
  --text-color: rgb(40, 40, 40);
  --link-color: rgb(142, 97, 9);

  --card-width: clamp(280px, calc(129.6px + 47vw), 468px);
  --card-min-height: clamp(440px, calc(347.2px + 28.75vw), 554px);

  --card-radius: clamp(20px, calc(14.4px + 1.75vw), 27px);
  --card-pad-top: clamp(20px, calc(7.2px + 4vw), 36px);
  --card-pad-x: clamp(20px, calc(8.8px + 3.5vw), 34px);
  --card-pad-bottom: clamp(18px, calc(8.4px + 3vw), 30px);

  --logo-width: clamp(240px, calc(112px + 40vw), 400px);
  --logo-gap: clamp(24px, calc(20.8px + 1vw), 28px);

  --title-size: clamp(15px, calc(12.6px + 0.75vw), 18px);
  --body-size: clamp(13px, calc(10.6px + 0.75vw), 16px);
  --note-size: clamp(13px, calc(10.6px + 0.75vw), 16px);

  --address-gap-top: clamp(25px, calc(14.6px + 3.25vw), 38px);
  --contact-gap-top: clamp(22px, calc(11.6px + 3.25vw), 35px);
  --status-gap-top: clamp(39px, calc(19px + 6.25vw), 64px);

  --contact-line-gap: clamp(0px, calc(-3.2px + 1vw), 4px);
  --note-max-width: clamp(212px, calc(138.4px + 23vw), 304px);
}

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

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  background: var(--page-bg);
  color: var(--text-color);
  font-family: Georgia, "Times New Roman", serif;
}

.page-shell {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 20px;
}

.info-card {
  width: min(100%, var(--card-width));
  min-height: var(--card-min-height);
  padding: var(--card-pad-top) var(--card-pad-x) var(--card-pad-bottom);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.card-main {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#gritscher-logo {
  width: min(100%, var(--logo-width));
  background: transparent;
  flex: 0 0 auto;
}

#gritscher-logo img {
  display: block;
  width: 100%;
  height: auto;
}

h1 {
  margin: var(--logo-gap) 0 0;
  color: var(--text-color);
  font-size: var(--title-size);
  font-weight: 700;
  line-height: 1.2;
}

.address-block {
  margin: var(--address-gap-top) 0 0;
  font-style: normal;
  font-size: var(--body-size);
  line-height: 1.32;
}

.address-block p,
.contact-block p,
.status-note {
  margin: 0;
}

.contact-block {
  margin-top: var(--contact-gap-top);
  display: flex;
  flex-direction: column;
  gap: var(--contact-line-gap);
  font-size: var(--body-size);
  line-height: 1.32;
}

a {
  color: var(--link-color);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  text-decoration: underline;
}

a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.status-note {
  margin-top: auto;
  padding-top: var(--status-gap-top);
  max-width: var(--note-max-width);
  font-size: var(--note-size);
  line-height: 1.25;
}

@media (max-width: 319px) {
  .page-shell {
    padding: 12px;
  }

  .info-card,
  #gritscher-logo {
    width: 100%;
  }
}