/* Final supplied assets. One shared hero; only placement and background source change. */
.birthday-hero { --peach: #ffd0aa; background: #090c19; aspect-ratio: 16 / 9; }
.birthday-hero::before { content: none; }
.hero-backdrop { position: absolute; inset: 0; z-index: -1; }
.hero-backdrop .media { height: 100%; aspect-ratio: auto; background: #090c19; }
.hero-backdrop img { object-fit: contain; }
.birthday-canvas { position: relative; width: 100%; height: 100%; }
.birthday-hero .birthday-hashtag { position: absolute; left: 14.5%; top: 20%; width: 49%; height: auto; margin: 0; padding: 0; line-height: 0; transform: none; }
.hashtag-art { display: block; width: 100%; height: auto; aspect-ratio: 3458 / 1059; object-fit: contain; }
/* English ink reaches source row 1058 (of 1059): 20% + 49% × 1059/3458 × 16/9 = 46.67746% of the PC hero. */
.gift-button { position: absolute; left: 31%; top: calc(46.67746% + 35px); display: flex; width: 22%; min-width: 0; min-height: clamp(44px, 4.3vw, 72px); margin: 0; padding: 10px 16px; gap: 10px; color: #582917; font-size: clamp(12px, 1.45vw, 24px); white-space: nowrap; background: #ffd0aa; border: 1px solid #ffe0c5; border-radius: 40px; box-shadow: 0 4px 18px #0a070a33; transition: background 150ms; }
.gift-button:hover { background: #ffe0c6; }
.gift-button:focus-visible { outline-color: #fff1df; outline-offset: 6px; border-radius: 40px; }
.gift-button .icon { width: clamp(16px, 1.4vw, 24px); height: clamp(16px, 1.4vw, 24px); }
.polaroid { position: absolute; left: 4%; bottom: 9%; width: 16%; padding: .8% .8% 0; background: #fff9ef; transform: rotate(-11deg); box-shadow: 0 6px 20px #0007; }
.polaroid-photo { aspect-ratio: var(--ratio-desktop); }
.polaroid-photo img { object-fit: contain; }
.polaroid-margin { height: clamp(20px, 2.9vw, 54px); display: flex; justify-content: flex-end; align-items: center; padding-right: 6%; }
.drawn-heart { width: 18px; height: 18px; fill: none; stroke: #b6503c; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transform: rotate(8deg); }
/* Direct links also work without JavaScript. Desktop keeps all five section links. */
.site-header.direct-navigation { position: fixed; }
.site-header.direct-navigation #main-nav a { min-width: 44px; }
.site-header.direct-navigation + main { padding-top: var(--header-height); }
@media (max-width: 900px) {
  :root { --header-height: 68px; }
  .site-header.direct-navigation .nav-shell { width: calc(100% - 40px); min-height: 68px; padding: 0; gap: 12px; flex-wrap: nowrap; }
  .direct-navigation .wordmark { font-size: 25px; }
  .direct-navigation .brand-note { font-size: 6px; letter-spacing: 1.8px; }
  .site-header.direct-navigation #main-nav { position: static; display: flex; flex-direction: row; align-items: center; width: auto; max-height: none; overflow: visible; padding: 0; gap: 4px; background: none; border: 0; }
  .site-header.direct-navigation #main-nav a { display: none; min-height: 44px; padding: 9px 12px; font-size: 13px; }
  .site-header.direct-navigation #main-nav a[data-nav-type="about"], .site-header.direct-navigation #main-nav a[data-nav-type="download"] { display: flex; }
  .site-header.direct-navigation #main-nav .nav-download { margin: 0; }
  .birthday-hero { aspect-ratio: 1 / 2; }
  .hero-backdrop img { object-fit: cover; object-position: 50% 50%; }
  .birthday-hero .birthday-hashtag { left: 5%; top: 2%; width: 90%; }
  .polaroid { left: 5%; bottom: 14%; width: 28%; padding: 7px 7px 0; transform: rotate(-9deg); }
  .polaroid-photo { aspect-ratio: var(--ratio-mobile); }
  .polaroid-margin { height: clamp(25px, 6.5vw, 48px); }
  .drawn-heart { width: 15px; height: 15px; }
  .gift-button { top: auto; left: 50%; bottom: 5%; transform: translateX(-50%); width: 46%; min-width: 180px; max-width: 390px; min-height: clamp(52px, 13vw, 80px); padding: 12px 14px; font-size: clamp(14px, 3.25vw, 22px); gap: 8px; }
  .gift-button .icon { width: clamp(18px, 4.5vw, 26px); height: clamp(18px, 4.5vw, 26px); }
}
@media (max-width: 380px) {
  .direct-navigation .wordmark { font-size: 23px; }
  .site-header.direct-navigation .nav-shell { gap: 8px; }
  .site-header.direct-navigation #main-nav a { padding-inline: 10px; }
}