/* Cheers2Coffee coming-soon page. Approved palette (vector package v3):
   soft white background, soft black logo and text, forest green used once. */
:root {
  --c2c-black: #181818;
  --c2c-off-white: #F7F7F2;
  --c2c-forest: #24483E;
  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--c2c-off-white);
  color: var(--c2c-black);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.page {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: clamp(56px, 11vh, 128px);
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
  text-align: center;
}
.logo { line-height: 0; margin-bottom: clamp(44px, 8vh, 84px); }
.logo img { display: block; width: min(560px, 80vw); height: auto; }
.headline {
  margin: 0;
  font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.35rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.rule {
  display: block;
  width: 64px;
  height: 3px;
  margin: clamp(28px, 5vh, 44px) auto clamp(18px, 3vh, 26px);
  background: var(--c2c-forest);
  border-radius: 2px;
}
.signoff {
  margin: 0;
  font-size: clamp(0.95rem, 0.88rem + 0.3vw, 1.08rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--c2c-black);
}

/* Footer: a quiet establishment detail in normal flow below the main content,
   at least 32px clear of it, with ~24px below (more on phones with a home bar). */
.site-footer {
  flex: 0 0 auto;
  margin-top: 32px;
  padding: 0 max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: #666666;
  text-align: center;
}