/* Shared branding uses the original, transparent PNGs supplied in Logo.zip. */
.brand { display: flex; align-items: center; gap: 8%; }
.logo { display: block; position: relative; flex: 0 0 auto; overflow: hidden; }
.logo img { position: absolute; display: block; max-width: none; height: auto; }
.logo-free { aspect-ratio: 608 / 304; }
.logo-free img { width: 164.473685%; left: -32.236843%; top: -114.473685%; }
.logo-heart { aspect-ratio: 655 / 357; }
.logo-heart img { width: 152.671756%; left: -26.412214%; top: -89.915967%; }
.brand .logo-free { width: 37%; }
.brand .logo-heart { width: 41%; }
.brand-cross { flex: 1 0 auto; color: #58595b; font-size: clamp(10px, .75vw, 20px); font-weight: 300; }
.logo-white img { filter: brightness(0) invert(1); }
.mobile-navigation { display: none; }

.static-page { background: #07131c; }
.static-stage { position: relative; isolation: isolate; overflow: hidden; width: 100%; height: calc(100svh - var(--header-height)); min-height: 51.328125vw; }
.scene-background { position: absolute; z-index: -3; inset: 0; pointer-events: none; }
.scene-background img { position: absolute; display: block; max-width: none; object-fit: fill; }
.free-stage .scene-background img { left: 0; top: -9.589%; width: 100%; height: 109.589%; }
.heart-stage .scene-background img { left: -.2%; top: -10.13%; width: 100.555%; height: 110.1%; }
.series-stage .scene-background img { left: -4.231%; top: -12.329%; width: 107.527%; height: 131.28%; }
.design-title { position: absolute; margin: 0; line-height: 0; }
.design-title img { display: block; width: 100%; height: auto; }
.i18n-art-english{display:none;color:#fff;font-family:Georgia,"Times New Roman",serif;font-weight:500;line-height:1.05;letter-spacing:.08em;text-align:center;text-shadow:0 3px 12px #0019}
body[data-locale="en"] .design-title picture,body[data-locale="en"] .series-option h2 img{display:none}
body[data-locale="en"] .i18n-art-english{display:block}
.design-title .i18n-art-english{font-size:clamp(28px,4vw,76px)}
.series-option h2 .i18n-art-english{font-size:clamp(21px,2.2vw,42px);color:#173047;text-shadow:none}
.free-stage .design-title { left: 24.665%; top: 2.801%; width: 52.167%; filter: drop-shadow(0 2px 3px #005161); }
.heart-stage .design-title { left: 20.352%; top: 7.705%; width: 60.065%; filter: drop-shadow(0 2px 3px #7c674b); }
.series-stage .design-title { left: 23.705%; top: 2.438%; width: 49.621%; filter: drop-shadow(0 2px 3px #112445); }
.card-stack { position: absolute; width: 8.996%; top: 5.48%; bottom: 4.2%; --last-card: 18; --card-height: 14.035vw; }
.card-stack img { position: absolute; top: calc(var(--card-index) * (100% - var(--card-height)) / var(--last-card)); left: 0; width: 100%; height: auto; filter: drop-shadow(0 2px 3px #0009); }
.card-stack-left { left: 8.2%; }
.card-stack-right { right: 8.2%; }
.heart-stage .card-stack { top: 6.57%; bottom: 6.1%; width: 9.252%; --last-card: 19; --card-height: 14.435vw; }
.heart-stage .card-stack-left { left: 7.96%; }
.heart-stage .card-stack-right { right: 8.32%; }
.mobile-cards { display: none; }
.intuition { position: absolute; top: 74.3%; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 1.5vw; margin: 0; color: #dcfaff; font-family: "Noto Serif TC", "PMingLiU", serif; font-size: clamp(14px, 1.3672vw, 35px); letter-spacing: .28em; white-space: nowrap; text-shadow: 0 1px 4px #264c53; }
.intuition::before, .intuition::after { content: ''; width: 7.7vw; height: 1px; background: currentColor; opacity: .5; }
.heart-stage .intuition { top: 65.1%; color: white; text-shadow: 0 2px 4px #725b37; }
.series-signature { position: absolute; bottom: 4%; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; align-items: center; gap: 1.5vw; white-space: nowrap; color: white; }
.series-signature .logo-free { width: 8.6vw; }
.series-signature .logo-heart { width: 8vw; }
.series-signature > span:not(.logo) { font-size: clamp(8px, .68vw, 17px); letter-spacing: .3em; }
.series-characters { position: absolute; z-index: -1; top: -10.27%; right: .35%; width: 33.1875%; height: auto; opacity: .4; pointer-events: none; mask-image: linear-gradient(#000 30%, transparent 100%); }
.series-options { position: absolute; left: 10.606%; right: 11.832%; top: 39.414%; bottom: 4.48%; display: flex; justify-content: space-between; gap: 10%; }
.series-option { position: relative; display: flex; flex-direction: column; align-items: center; width: 35.91%; padding: 2.2vw 3.1vw 3.2vw; border: 1px solid #ffffffe0; border-radius: 1.5vw; background: linear-gradient(130deg, #b4ddef69, #365b6a66); backdrop-filter: blur(8px); box-shadow: inset 0 0 24px #e6f8ff20, 0 4px 16px #0003; }
.series-option .logo { width: 41%; min-width: 80px; }
.series-option .logo-heart { width: 42%; }
.series-option h2 { width: calc(100% + .8vw); margin: 2.6vw -.4vw 1.3vw; font-size: inherit; line-height: 0; }
.series-option h2 img { width: 100%; height: auto; }
.series-copy { margin: 0; color: #fff; font-size: clamp(12px, 1.055vw, 27px); line-height: 1.7; letter-spacing: .07em; text-shadow: 0 1px 3px #263b47; }
.series-link { display: flex; align-items: center; justify-content: center; min-height: 36px; width: 67%; margin-top: auto; padding: .58vw .3vw; border: 1px solid white; border-radius: 99px; color: white; font-size: clamp(12px, 1.17vw, 30px); font-weight: 600; letter-spacing: .3em; text-indent: .3em; }
.series-link:hover, .series-link:focus-visible { background: #ffffff20; }
/* Base layouts stay still; canvas scenery and explicitly scoped cards.css add motion. */
.static-page *, .static-page *::before, .static-page *::after { animation: none !important; transition: none !important; }

@media (min-width: 768px) and (max-width: 1100px) {
  .static-stage { min-height: 620px; }
  .series-option { padding-bottom: 28px; }
  .series-options { top: 36%; }
  .series-option h2 { margin-top: 24px; margin-bottom: 18px; }
  .series-copy { font-size: 12px; }
}

@media (max-width: 767px) {
  .mobile-navigation { display: block; position: absolute; z-index: 10; top: max(12px, env(safe-area-inset-top)); right: 14px; color: #fff; }
  .menu-toggle { display: grid; place-items: center; width: 44px; height: 44px; padding: 11px; border: 1px solid #ffffff70; border-radius: 50%; background: #07131c88; color: white; cursor: pointer; }
  .menu-toggle svg { width: 20px; height: 20px; }
  .mobile-menu { position: absolute; top: 52px; right: 0; width: 184px; padding: 10px; border: 1px solid #ffffff5c; border-radius: 14px; background: #0b1927f5; box-shadow: 0 10px 32px #0006; }
  .mobile-menu a { display: block; padding: 12px; font-size: 15px; border-radius: 8px; }
  .mobile-menu a[aria-current] { color: #f7ebd7; background: #ffffff16; }
  .mobile-menu .mobile-menu-link { display: block; width: 100%; padding: 12px; color: inherit; background: none; border: 0; border-radius: 8px; font: inherit; font-size: 15px; text-align: left; }
  .mobile-menu .mobile-menu-link[aria-disabled='true'] { color: #ffffffb8; cursor: default; }
  .static-stage { height: max(100svh, 177.777778vw); min-height: 0; }
  .free-stage .scene-background img { left: -.113%; top: 0; width: 100.226%; height: 100.352%; }
  .heart-stage .scene-background img { left: -6.134%; top: -6.257%; width: 117.115%; height: 117.261%; }
  .series-stage .scene-background img { left: -.602%; top: -16.597%; width: 102.676%; height: 117.503%; }
  .free-stage .design-title { left: 9.606%; top: 7.348%; width: 80.819%; }
  .heart-stage .design-title { left: 9.955%; top: 11.522%; width: 83.385%; }
  .series-stage .design-title { left: 7.969%; top: 8.439%; width: 84.061%; }
  .card-stack { display: none; }
  .mobile-cards { position: absolute; display: block; left: .19%; width: 99.719%; height: auto; top: calc(32% - 59.582vw); }
  .free-stage .mobile-cards { top: calc(32% - 59.582vw); }
  .heart-stage .mobile-cards { top: calc(34% - 59.582vw); }
  .intuition, .heart-stage .intuition { top: 76.6%; font-size: clamp(13px, 3.125vw, 24px); gap: 3.5vw; letter-spacing: .24em; }
  .intuition::before, .intuition::after { width: 17.778vw; }
  .series-signature { bottom: 9.6%; gap: 3vw; }
  .series-signature .logo-free { width: 17vw; }
  .series-signature .logo-heart { width: 17vw; }
  .series-signature > span:not(.logo) { font-size: clamp(7px, 1.67vw, 12px); letter-spacing: .2em; }
  .series-characters { display: none; }
  .series-stage { height: auto; min-height: max(100svh, 177.777778vw); padding-top: 97.92vw; padding-bottom: 23vw; }
  .series-options { position: relative; inset: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4.44vw; width: 85.94%; margin: 0 auto; }
  .series-option { width: 100%; padding: 5.1vw 3vw 5vw; border-radius: 2.1vw; min-height: 72vw; }
  .series-option .logo { width: 55%; min-width: 0; }
  .series-option .logo-heart { width: 57%; }
  .series-option h2 { width: calc(100% + 4vw); margin: 6.7vw -2vw 4vw; }
  .design-title .i18n-art-english{font-size:clamp(28px,9vw,48px)}
  .series-option h2 .i18n-art-english{font-size:clamp(22px,6vw,32px)}
  .series-copy { margin-bottom: 5vw; font-size: clamp(11px, 2.08vw, 17px); line-height: 1.7; letter-spacing: .02em; }
  .series-link { width: 100%; min-height: 36px; margin-top: auto; padding: 7px 2px; font-size: clamp(11px, 2.5vw, 18px); letter-spacing: .2em; }
  .series-copy + .series-link { margin-top: auto; }
}