:root {
  --white: #FBF8F3;
  --duckegg: #B9DBDD;
  --noir: #1F1D1B;
  --sakura: #F4C2CF;
  --matcha: #B8D4A8;
  --blush: #F19BAF;

  /* set per page load by main.js */
  --ground: var(--duckegg);
  --body: var(--sakura);

  --guest-w: clamp(170px, 26vw, 340px);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);

  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: inherit; }

html, body { height: 100%; margin: 0; }
body {
  background: var(--ground);
  color: var(--noir);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

main {
  height: 100%;
  display: grid;
  place-items: center;
  text-align: center;
  /* keep the text clear of the peeking macaron */
  padding: 24px 24px calc(var(--guest-w) * 0.55 + 24px);
}

.house { display: grid; justify-items: center; }

h1 { margin: 0; line-height: 0; }
.wordmark { width: clamp(240px, 58vw, 580px); height: auto; display: block; }

.line {
  font-family: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  font-style: italic;
  font-weight: 450;
  font-variation-settings: "opsz" 14;
  font-size: clamp(16px, 1.9vw, 19px);
  line-height: 1.7;
  margin: clamp(28px, 4.5vw, 44px) 0 0;
  max-width: 40ch;
}
.line.mail { margin-top: 6px; }
.line a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.line a:hover { text-decoration-thickness: 2px; }

/* ---------- the guest ---------- */
.guest {
  position: fixed;
  left: 50%;
  bottom: 0;
  width: var(--guest-w);
  padding: 0; margin: 0; border: 0; background: none;
  cursor: pointer;
  transform: translate(-50%, 100%);
  transition: transform .7s var(--ease-pop);
  -webkit-tap-highlight-color: transparent;
}
.guest svg { display: block; width: 100%; height: auto; overflow: visible; }
.guest .body { fill: var(--body); transition: fill .3s; }
.guest .cheeks { fill: var(--blush); }
.guest .shut { display: none; }
.guest.blink .open { display: none; }
.guest.blink .shut { display: inline; }

/* peeking: only the top shell, eyes and cheeks clear the bottom edge */
.guest.peek { transform: translate(-50%, 42%); }
/* standing: the whole macaron, feet and all */
.guest.up { transform: translate(-50%, -4%); }

.guest:focus-visible { outline: none; }
.guest:focus-visible svg { filter: drop-shadow(0 0 0 var(--noir)) drop-shadow(0 -3px 0 var(--noir)); }

.caption {
  position: absolute;
  left: 88%;
  top: 4%;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Arial Rounded MT Bold", sans-serif;
  font-weight: 900;
  font-size: clamp(14px, 1.7vw, 18px);
  white-space: nowrap;
  color: var(--noir);
  opacity: 0;
  transform: translateY(6px) rotate(-6deg);
  transition: opacity .3s, transform .4s var(--ease-pop);
  pointer-events: none;
}
.guest.peek .caption.soon,
.guest.up .caption.feet { opacity: 1; transform: translateY(0) rotate(-6deg); }
.guest.up .caption.soon { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .guest, .caption { transition: none; }
}

@media (max-height: 520px) and (orientation: landscape) {
  :root { --guest-w: clamp(110px, 18vw, 180px); }
}

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }