:root {
  color: #201f1d;
  background: #f4f1eb;
  font-family: "Avenir Next", Avenir, ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  font-synthesis: none;
  --paper: #fcfbf8;
  --muted: #6f6b65;
  --line: #dedad2;
  --pink: #ff4f87;
  --blue: #3867ec;
  --amber: #ffae00;
  --teal: #19b8aa;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #f4f1eb; }
.invitation { width: min(100%, 1120px); min-height: 100svh; margin: 0 auto; overflow: hidden; background: var(--paper); }
.hero { display: grid; justify-items: center; padding: 18px 24px 46px; text-align: center; }
.logo-stage { position: relative; display: grid; width: min(52vw, 420px); aspect-ratio: 1; place-items: center; }
.logo-stage img { position: relative; z-index: 3; width: 72%; height: 72%; }
.float-dot { position: absolute; z-index: 1; border-radius: 50%; animation: float-dot 9s ease-in-out infinite; }
.dot-pink { top: 19%; left: 8%; width: 18px; height: 18px; background: var(--pink); animation-delay: -2s; }
.dot-blue { top: 11%; right: 13%; width: 14px; height: 14px; background: var(--blue); animation-duration: 11s; }
.dot-amber { right: 4%; bottom: 25%; width: 22px; height: 22px; background: var(--amber); animation-duration: 13s; animation-delay: -4s; }
.dot-teal { bottom: 11%; left: 20%; width: 13px; height: 13px; background: var(--teal); animation-duration: 10s; animation-delay: -6s; }
.dot-pink-small { top: 42%; right: 3%; width: 7px; height: 7px; background: var(--pink); animation-duration: 8s; }
.dot-blue-small { bottom: 31%; left: 2%; width: 8px; height: 8px; background: var(--blue); animation-duration: 12s; animation-delay: -5s; }
h1 { max-width: 850px; margin: -2px 0 0; }
.title-kicker { display: block; margin-bottom: 9px; color: var(--muted); font-size: clamp(1rem, 1.65vw, 1.24rem); font-weight: 650; letter-spacing: 0.025em; }
.title-main { display: block; font-size: clamp(2.2rem, 5.1vw, 4.3rem); font-weight: 700; line-height: 1.06; letter-spacing: -0.055em; }
.coming-soon { margin: 18px 0 0; color: #d93470; font-size: 0.9rem; font-weight: 650; letter-spacing: 0.035em; }
.details { display: grid; grid-template-columns: 0.9fr 1.1fr 1.3fr; gap: clamp(30px, 6vw, 78px); margin: 0 42px; border-top: 1px solid var(--line); padding: 28px 0 34px; }
.details > div { min-width: 0; }
.details span { display: block; margin-bottom: 9px; color: var(--muted); font-size: 0.78rem; font-weight: 650; letter-spacing: 0.01em; }
.details strong { font-size: 1rem; font-weight: 650; line-height: 1.45; }
.details sup { margin-left: 2px; font-size: 0.63em; line-height: 0; }
.details sup a { color: var(--muted); font-weight: 700; text-decoration: none; }
.emnlp-mark { display: flex; align-items: center; gap: 12px; line-height: 1; }
.emnlp-mark img { width: 46px; height: auto; }
.emnlp-mark div { display: flex; align-items: baseline; gap: 7px; }
.emnlp-mark strong { font-size: 1.48rem; font-weight: 700; letter-spacing: -0.05em; }
.emnlp-mark b { color: var(--blue); font-size: 0.72rem; }
.summary { margin: 0 42px; border-top: 1px solid var(--line); padding: 30px 0 34px; text-align: center; }
.summary p { max-width: 760px; margin: 0 auto; font-size: clamp(1.18rem, 2.3vw, 1.6rem); font-weight: 520; letter-spacing: -0.025em; line-height: 1.45; }
.footnote { margin: 0 42px; padding: 2px 0 26px; color: var(--muted); font-size: 0.68rem; line-height: 1.45; }
.footnote sup { margin-right: 5px; color: var(--muted); font-weight: 700; }
.contacts { margin: 0 42px; border-top: 1px solid #bdb8af; padding: 28px 0 34px; }
.contacts h2 { margin: 0 0 28px; font-size: 0.9rem; font-weight: 650; letter-spacing: 0.01em; }
.contact-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 5vw, 64px); }
.contact-list article { min-width: 0; }
.contact-list .contact-role { min-height: 0; margin: 0 0 10px; color: var(--blue); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; }
.contact-list h3 { margin: 0 0 7px; font-size: 1.05rem; font-weight: 650; letter-spacing: -0.02em; }
.contact-list p { min-height: 2.8em; margin: 0 0 12px; color: var(--muted); font-size: 0.78rem; line-height: 1.4; }
.contact-list a { font-size: 0.77rem; }
.site-footer { margin: 0 42px; border-top: 1px solid var(--line); padding: 22px 0 28px; color: var(--muted); font-size: 0.68rem; text-align: center; }
.site-footer p { margin: 0; }
a { color: inherit; overflow-wrap: anywhere; text-decoration-color: rgba(56, 103, 236, 0.45); text-underline-offset: 3px; }
a:hover, a:focus-visible { color: var(--blue); }
@keyframes float-dot { 0%, 100% { translate: 0 0; } 35% { translate: 7px -10px; } 70% { translate: -6px 5px; } }
@media (max-width: 680px) {
  .hero { padding-top: 14px; padding-bottom: 40px; }
  .logo-stage { width: min(82vw, 370px); }
  h1 { font-size: clamp(2rem, 9vw, 3rem); }
  .details { grid-template-columns: 1fr; gap: 22px; margin: 0 20px; padding: 26px 0 30px; }
  .summary { margin: 0 20px; padding: 28px 0 30px; }
  .footnote { margin: 0 20px; }
  .contacts { margin: 0 20px; padding: 30px 0 34px; }
  .contact-list { grid-template-columns: 1fr; gap: 26px; }
  .contact-list p { min-height: 0; }
  .site-footer { margin: 0 20px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }
