:root {
  color-scheme: light;
  --surface: #fffaf0;
  --text: #40152e;
  --accent: #a93528;
  --muted: #66565d;
  --button: #a93528;
  --button-text: #fffdfa;
  --button-hover: #872a22;
  --line: #e6d9cd;
  --body: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  --display: "Arial Rounded MT Bold", "Avenir Next", Avenir, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--surface); }
body { margin: 0; color: var(--text); background: var(--surface); font: 1rem/1.65 var(--body); }
::selection { color: var(--surface); background: var(--text); }
a { color: inherit; text-underline-offset: .2em; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; }
.page { display: flex; flex-direction: column; min-height: 100dvh; max-width: 1400px; margin-inline: auto; padding: max(24px, env(safe-area-inset-top)) max(48px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(48px, env(safe-area-inset-left)); }
.site-header { display: flex; align-items: center; min-height: 56px; }
.wordmark { display: inline-flex; align-items: flex-start; gap: 6px; min-height: 44px; color: var(--accent); text-decoration: none; font: 800 2.1rem/1.2 var(--display); letter-spacing: -.04em; }
/* Preserve the existing Papô wordmark and its yellow accent. */
.wordmark span { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: #f4c85b; }
main { flex: 1; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: center; padding-block: 40px; }
.hero-copy { padding-block: 8px; }
p { margin: 0; text-wrap: pretty; }
.construction { margin-bottom: 24px; color: var(--muted); font-size: .9375rem; }
h1 { margin: 0; font: 700 clamp(2rem, 3.25vw, 2.875rem)/1.14 var(--display); letter-spacing: -.045em; text-wrap: balance; }
h1 em { display: block; color: var(--accent); font-style: normal; }
.invitation { max-width: 39ch; margin-top: 24px; color: var(--muted); font-size: 1.0625rem; }
.instagram-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 54px; margin-top: 32px; padding: 13px 20px; border-radius: 16px; color: var(--button-text); background: var(--button); text-decoration: none; font-weight: 700; font-size: .9375rem; white-space: nowrap; }
.instagram-link:hover { background: var(--button-hover); }
.instagram-link:active { transform: scale(.98); }
.arrow { font: 400 1.4rem/1 var(--body); }
.hero-image { margin: 0; overflow: hidden; border-radius: 16px; aspect-ratio: 4 / 5; max-height: 560px; width: 100%; }
.hero-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
footer { padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: .875rem; }
@media (prefers-reduced-motion: no-preference) {
  .instagram-link { transition: background .18s ease, transform .18s ease; }
  .instagram-link:hover { transform: translateY(-2px); }
  .instagram-link:active { transform: scale(.98); }
}
@media (max-width: 1023px) and (min-width: 768px) {
  .page { padding-inline: 32px; }
  main { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 24px; }
  h1 { font-size: clamp(1.625rem, 3.2vw, 2rem); }
}
@media (max-width: 767px) {
  .page { padding: max(20px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); }
  main { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-block: 32px; }
  .hero-copy { width: 100%; }
  .construction { margin-bottom: 20px; font-size: .875rem; }
  h1 { max-width: 21ch; font-size: clamp(2rem, 7.1vw, 3rem); line-height: 1.15; }
  .invitation { margin-top: 20px; font-size: 1rem; }
  .instagram-link { margin-top: 24px; }
  .hero-image { aspect-ratio: 5 / 4; max-height: 420px; }
  .hero-image img { object-position: center 58%; }
}
@media (forced-colors: active) {
  .instagram-link { border: 1px solid ButtonText; }
}