@font-face {
  font-family: "Fraunces Soft";
  src: url("./assets/fraunces-soft-italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}

:root { color-scheme: light; --paper: #f7f2e7; --green: #22653e; }
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { background: var(--paper); color: var(--green); overflow: hidden; }
.stage { width: 100%; height: 100vh; height: 100svh; position: relative; overflow: hidden; }
.word-position { position: absolute; left: 50%; top: 48%; margin: 0; width: max-content; transform: translate(-50%, -50%); }
.greeting {
  display: block; border: 0; padding: .12em .15em .18em .08em; margin: 0;
  appearance: none; background: transparent; color: var(--green);
  font-family: "Fraunces Soft", Georgia, serif; font-weight: 700; font-style: italic;
  font-size: min(clamp(42px, 11.8vw, 166px), 28svh); line-height: 1.08; letter-spacing: -.058em;
  white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; user-select: none; transform-origin: 50% 60%;
}
.greeting:focus { outline: none; }
.greeting:focus-visible { outline: 1px solid currentColor; outline-offset: 12px; border-radius: 6px; }
.greeting.is-pressed { color: #164b2c; }
.swoosh { position: absolute; width: clamp(56px, 10vw, 130px); height: auto; pointer-events: none; opacity: 0; overflow: visible; }
.swoosh path { stroke: var(--green); stroke-width: 1.5; stroke-linecap: round; }
.swoosh path + path { stroke-width: .8; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 480px) { .greeting { font-size: min(clamp(40px, 12vw, 58px), 28svh); letter-spacing: -.055em; } }
@media (prefers-reduced-motion: reduce) { .swoosh { display: none; } }
@media (forced-colors: active) { .greeting { color: ButtonText; } }