/* #11 — the approved continuous, illustrated companion-invitation story. */
body { background: var(--paper); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.button { background: linear-gradient(105deg, #e95f77, #ed637a); border: 0; color: #fff; box-shadow: none; }
.button:hover { background: #dd536d; }
.button:focus-visible { outline: 3px solid #713329; outline-offset: 5px; }
.hero::before { display: none; }
.hero .eyebrow { display: none; }
.hero { margin-bottom: 20px; }
html:lang(zh) .hero h1 { font-size: clamp(46px, 4.5vw, 76px); }
.hero-actions .button { background: linear-gradient(105deg, #e95f77, #ed637a); box-shadow: none; }
.hero-app-note { color: #684b3f; }
.story-scene { position: relative; isolation: isolate; max-width: 1774px; margin-inline: auto; min-height: clamp(550px, 49vw, 840px); }
.story-illustration { position: absolute; inset: 0; z-index: -2; }
.story-illustration img { width: 100%; height: 100%; object-fit: cover; }
.story-scene::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.story-copy { padding-top: clamp(62px, 6.2vw, 105px); padding-bottom: 30px; }
.story-copy h2, .story-heading h2 { font-size: clamp(42px, 4.2vw, 70px); line-height: 1.18; letter-spacing: -.035em; color: #21100b; font-weight: 600; }
html:lang(zh) .story-copy h2, html:lang(zh) .story-heading h2 { font-weight: 800; -webkit-text-stroke: .15px currentColor; }
.story-copy > p { font-size: clamp(18px, 1.6vw, 25px); line-height: 1.75; color: #63493b; margin: 20px 0 26px; }
.story-copy .button { min-height: 65px; min-width: 290px; font-size: clamp(24px, 2.15vw, 33px); padding: 16px 32px; gap: 26px; }
.story-copy > .story-app-note { font-size: clamp(13px, 1.05vw, 17px); margin: 20px 0 0; line-height: 1.8; }
.story-life { min-height: clamp(530px, 45vw, 780px); }
.story-life::after { background: radial-gradient(ellipse 62% 72% at 1% 0%, var(--paper) 30%, #fffcf7f2 47%, #fffcf780 65%, transparent 83%); }
.story-life .story-copy { padding-top: 62px; }
.life-moments { position: absolute; left: 0; right: 0; top: 54%; display: flex; justify-content: space-around; align-items: start; list-style: none; padding: 0; margin-block: 0; }
.life-moments li { padding: 10px 22px; background: #fffcf7ee; color: #5d4938; box-shadow: 0 4px 14px #583e2020; font-size: clamp(15px, 1.6vw, 23px); transform: rotate(-6deg); }
.life-moments li:nth-child(2) { transform: rotate(4deg) translateY(25px); }
.life-moments li:nth-child(3) { transform: rotate(-4deg); }
.story-create { min-height: clamp(620px, 48vw, 830px); }
.story-create::after { background: linear-gradient(90deg, var(--paper) 0%, #fffcf7fc 24%, #fffcf7e6 32%, #fffcf780 43%, transparent 57%); }
.story-create .story-copy h2 { max-width: 43%; }
.story-create .story-copy > p { max-width: 40%; }
.creation-path { display: flex; justify-content: space-around; gap: 32px; position: absolute; left: 2.8%; bottom: 45px; width: 43%; list-style: none; margin: 0; padding: 23px 18px; background: #fff8eade; border-block: 1px solid #edd9bc; box-shadow: 0 5px 20px #a37b3f0b; transform: rotate(-2deg); }
.creation-path li { position: relative; display: grid; justify-items: center; text-align: center; align-content: start; gap: 11px; font-size: clamp(13px, 1.25vw, 19px); line-height: 1.5; }
.creation-path li + li::before { content: '→'; position: absolute; left: -25px; top: 14px; color: #7a6553; }
.creation-path svg { width: 28px; height: 28px; }
.story-people { padding-block: 65px 36px; }
.story-heading { margin-bottom: 32px; }
.story-heading p { font-size: clamp(18px, 1.65vw, 25px); color: #63493b; margin: 20px 0 0; }
.invitation-gallery { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; }
.invitation-card { min-width: 0; position: relative; text-align: center; color: var(--ink); text-decoration: none; padding-bottom: 40px; }
.invitation-art { position: relative; aspect-ratio: 1 / 1.4; overflow: hidden; mask-image: url('assets/gallery-edge.svg'); mask-size: 100% 100%; mask-repeat: no-repeat; }
.invitation-art img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .3s ease; }
.invitation-card h3 { display: inline-block; font-size: clamp(20px, 2vw, 30px); margin: 7px 0 0; line-height: 1.35; border-bottom: 1px solid #e98997; padding: 0 4px 7px; }
.custom-invitation h3 { font-size: clamp(18px, 1.7vw, 27px); }
.custom-invitation:hover .invitation-art img { transform: scale(1.025); }
.custom-label { display: block; position: absolute; left: 0; right: 0; bottom: 9px; font-size: clamp(12px, 1vw, 16px); line-height: 1.4; color: #994253; }
.invitation-plus { position: absolute; bottom: 20%; right: 18%; font: 32px/1 var(--sans); color: #cf526a; padding: 6px; background: #fff8ebeb; box-shadow: 0 2px 8px #59432720; transform: rotate(5deg); }
.story-art-note { text-align: right; color: #755d4e; font: 11px/1.7 var(--sans); margin: 8px 0 0; }
.story-download { min-height: clamp(530px, 43vw, 745px); }
.story-download::after { background: linear-gradient(90deg, var(--paper) 0%, #fffcf7fc 22%, #fffcf7e8 31%, #fffcf77a 44%, transparent 58%); }
.story-download .story-copy { padding-top: clamp(90px, 10vw, 155px); }
.story-download h2 { max-width: 56%; margin-bottom: 28px; }
.story-download .ios-status { font-size: clamp(14px, 1.2vw, 18px); margin: 17px 0 0; color: #63493b; }
.story-download .story-app-note { max-width: 39%; font-size: 13px; }
.story-faq { padding-block: 10px 30px; max-width: 1530px; }
.story-faq summary { font-size: 18px; padding-block: 20px; }
.story-faq .faq-list p { max-width: 1000px; }
.site-footer { padding-block: 25px; gap: 24px; }
.site-footer > div:first-child { display: flex; align-items: center; gap: 25px; }
.site-footer > div:first-child p { margin: 0; }
.legal-status { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: flex-end; }
.site-footer .preview-label { max-width: 190px; }
@media (min-width: 1101px) {
  html:lang(en) .hero h1 { font-size: clamp(45px, 4vw, 68px); }
  html:lang(en) .story-create .story-copy h2 { font-size: clamp(38px, 3.5vw, 60px); }
  html:lang(en) .story-copy .button { min-width: 275px; font-size: 27px; }
}
@media (max-width: 1100px) {
  .site-header nav { gap: 24px; font-size: 16px; transform: none; }
  .story-scene { min-height: 600px; }
  .story-copy h2, .story-heading h2 { font-size: 46px; }
  .story-copy > p { font-size: 19px; }
  .story-life { min-height: 560px; }
  .story-create { min-height: 650px; }
  .story-create .story-copy h2 { max-width: 60%; }
  .story-create .story-copy > p { max-width: 48%; }
  .story-create::after { background: linear-gradient(90deg, var(--paper), #fffcf7f5 30%, #fffcf799 49%, transparent 70%); }
  .creation-path { width: 53%; }
  .story-people { padding-top: 45px; }
  .invitation-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 18px; }
  .invitation-art { aspect-ratio: 1 / 1.2; }
  .invitation-card h3 { font-size: 28px; }
  .custom-invitation h3 { font-size: 26px; }
  .custom-label { font-size: 15px; }
  .story-download h2 { max-width: 65%; }
  .story-download .story-app-note { max-width: 48%; }
  .story-download .story-illustration img { object-position: 65% center; }
  .site-footer { flex-wrap: wrap; }
}
@media (max-width: 700px) {
  .site-header nav { gap: 25px; font-size: 14px; }
  html:lang(en) .site-header nav { gap: 16px; font-size: 12px; }
  html:lang(zh) .hero h1 { font-size: clamp(38px, 10.4vw, 48px); }
  .hero { margin-bottom: 12px; }
  .hero-links { gap: 20px; }
  .story-scene { display: flex; flex-direction: column; min-height: 0; padding-top: 25px; }
  .story-scene::after { display: none; }
  .story-copy { order: 0; padding: 6px 0 0; }
  .story-copy h2, .story-heading h2 { font-size: clamp(32px, 8.6vw, 44px); line-height: 1.25; letter-spacing: -.035em; }
  .story-copy > p { font-size: 16px; line-height: 1.85; margin: 17px 0 22px; }
  .story-illustration { order: 1; position: relative; inset: auto; width: 100%; z-index: 0; }
  .story-illustration img { height: auto; aspect-ratio: 1.15; object-fit: cover; object-position: 60% center; }
  .story-life .story-copy { padding-top: 6px; }
  .life-moments { order: 2; position: relative; inset: auto; gap: 8px; justify-content: space-between; margin: -28px auto 25px; z-index: 1; }
  .life-moments li { padding: 8px 9px; font-size: 12px; line-height: 1.6; max-width: 34%; }
  .life-moments li:nth-child(2) { transform: rotate(4deg) translateY(8px); }
  .story-create .story-copy h2, .story-create .story-copy > p { max-width: 100%; }
  .story-copy .button { min-height: 58px; min-width: 240px; font-size: 24px; padding: 13px 26px; }
  .story-copy > .story-app-note { font-size: 12px; margin-top: 13px; }
  .story-create .story-illustration { margin-top: 18px; }
  .story-create .story-illustration img { aspect-ratio: 1.2; object-position: 62% center; }
  .creation-path { position: relative; left: auto; bottom: auto; order: 2; width: calc(100% - 40px); margin: -18px auto 24px; padding: 17px 12px; gap: 20px; z-index: 1; }
  .creation-path li { font-size: 12px; gap: 8px; }
  .creation-path svg { width: 24px; height: 24px; }
  .creation-path li + li::before { left: -17px; top: 9px; }
  .story-people { padding-block: 35px 10px; }
  .story-heading { margin-bottom: 23px; }
  .story-heading p { font-size: 16px; line-height: 1.8; margin-top: 17px; }
  .invitation-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .invitation-art { aspect-ratio: 1 / 1.25; }
  .invitation-card { padding-bottom: 32px; }
  .invitation-card h3 { font-size: 24px; margin-top: 4px; padding-bottom: 5px; }
  .custom-invitation h3 { font-size: 21px; }
  .custom-label { font-size: 12px; bottom: 5px; }
  .story-art-note { text-align: left; font-size: 10px; margin-top: 10px; }
  .story-download .story-copy { padding-top: 12px; }
  .story-download h2 { max-width: 100%; margin-bottom: 24px; }
  .story-download .story-app-note { max-width: 100%; }
  .story-download .ios-status { font-size: 14px; }
  .story-download .story-illustration { margin-top: 8px; }
  .story-download .story-illustration img { aspect-ratio: 1.15; object-position: 72% center; }
  .story-faq { padding-block: 9px 20px; }
  .story-faq summary { font-size: 16px; padding-block: 18px; }
  .story-faq .faq-list p { font-size: 14px; }
  .site-footer { display: grid; gap: 15px; padding-block: 20px; }
  .site-footer > div:first-child { gap: 15px; }
  .site-footer .wordmark { --logo-width: 105px; }
  .site-footer > div:first-child p { font-size: 11px; }
  .legal-status { justify-content: flex-start; gap: 5px 15px; }
  .legal-status p { font-size: 10px; }
  .site-footer .preview-label { text-align: left; max-width: none; margin: 0; }
  .site-footer .preview-label br { display: none; }
}
@media (prefers-reduced-motion: reduce) { .invitation-art img { transition: none; } }
/* Longer English lines need extra room above the paper path on tablets. */
@media (min-width: 701px) and (max-width: 1100px) {
  .story-create { min-height: 770px; }
}

/* Shared Chinese layout; regional font fallback keeps Traditional glyphs native. */
html:lang(zh-TW) { --serif: 'Songti TC', 'Noto Serif CJK TC', 'PMingLiU', serif; }
.language-menu { position: relative; }
.language-menu summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; list-style: none; white-space: nowrap; }
.language-menu summary::after { content: '⌄'; margin-left: 12px; font-size: .85em; }
.language-menu summary::-webkit-details-marker { display: none; }
.language-options { position: absolute; inset: calc(100% + 8px) 0 auto auto; min-width: 190px; width: max-content; max-width: calc(100vw - 36px); padding: 6px; background: #fffcf7; border: 1px solid #b9a08c; border-radius: 14px; box-shadow: 0 8px 24px #583e2020; }
.language-options a { display: flex; align-items: center; min-height: 44px; padding: 9px 14px; border-radius: 9px; text-decoration: none; font-size: 16px; }
.language-options a:hover { background: #f5e7df; }
.language-menu summary:focus-visible { outline: 3px solid #aa435b; outline-offset: 5px; }
@media (max-width: 700px) { .language-menu .language-link { padding: 8px 12px; font-size: 14px; } .language-menu .language-link::after { margin-left: 7px; } }