/* ConwyFest · Oktoberfest Conwy
   Palette drawn from the poster artwork:
   Nos (night, sampled from the poster edge), Memrwn (parchment),
   Aur (gold leaf), Pres (brass), Hen Aur (old gold, architectural) */

:root {
  --nos: #161620;
  --memrwn: #EDE3CD;
  --aur: #C9A45B;
  --pres: #A3925F;
  --hen-aur: #8A7546;
  --content-width: 560px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--nos);
  color: var(--memrwn);
  font-family: "Instrument Sans", system-ui, -apple-system, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
}

/* ---------- Header ---------- */

.site-header {
  text-align: center;
  padding: 44px 0 32px;
}

.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aur);
  margin-bottom: 10px;
}

.wordmark {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: clamp(2.4rem, 8vw, 3.4rem);
  letter-spacing: -0.01em;
  line-height: 1;
}

.wordmark::after {
  content: ".";
  color: var(--aur);
}

/* ---------- Poster ---------- */

.poster-section {
  width: 100%;
  display: flex;
  justify-content: center;
}

.poster-frame {
  width: 100%;
  max-width: var(--content-width);
  animation: rise 0.6s ease-out both;
}

.poster-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 32px 64px -32px rgba(0, 0, 0, 0.85);
}

/* ---------- Tickets ---------- */

.signup {
  width: 100%;
  max-width: var(--content-width);
  margin-top: 64px;
  text-align: center;
  animation: rise 0.6s ease-out 0.15s both;
}

.signup h2 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.7rem, 5vw, 2.2rem);
}

.signup-sub {
  color: var(--pres);
  margin: 8px auto 28px;
  max-width: 46ch;
}

/* The Ticket Tailor widget brings its own dark card, so no chrome here */
.embed-card {
  text-align: left;
}

/* The Ticket Tailor widget manages its own iframe height; just keep it flush */
.embed-card iframe {
  max-width: 100%;
  border: 0;
}

/* Fallback link shown if the widget script is blocked */
.tt-widget-fallback {
  text-align: center;
  padding: 40px 24px;
  color: var(--memrwn);
}

.tt-widget-fallback a {
  color: var(--aur);
  font-weight: 600;
}

.tt-widget-fallback a:hover {
  color: var(--memrwn);
}

/* ---------- Footer ---------- */

.site-footer {
  text-align: center;
  padding: 64px 0 40px;
  font-size: 0.85rem;
  color: var(--pres);
}

.footer-small {
  margin-top: 4px;
  color: var(--hen-aur);
}

/* ---------- Motion & focus ---------- */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .poster-frame,
  .signup {
    animation: none;
  }
}

:focus-visible {
  outline: 3px solid var(--aur);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .site-header {
    padding: 32px 0 24px;
  }

  .signup {
    margin-top: 48px;
  }
}