/* 用途：九款一屏版。依可用視窗高度縮放版面，不隱藏必要內容。
   執行方式：接在 collection.css 後載入。注意：極短橫向視窗保留捲動以避免裁切。 */
body.compact { height: 100svh; min-height: 640px; display: flex; flex-direction: column; }
.compact .ambient { height: 100%; }
.compact .site-header { height: 78px; min-height: 78px; }
.compact .site-header .brand { width: 112px; }
.compact main { flex: 1; min-height: 0; display: grid; grid-template-rows: minmax(0,1fr) 84px; }
.compact .hero { min-height: 0; height: 100%; }
.compact .hero-copy { padding-block: 25px; }
.compact h1 { width: min(420px,31vw); gap: 9px; }
.compact .kicker { margin-bottom: 22px; }
.compact .description { margin-top: 23px; }
.compact .subline { margin-top: 10px; }
.compact .actions { margin-top: 27px; }
.compact .hero-art { height: min(470px,59svh); margin: 0; }
.compact .category-strip { margin-top: 0; }
.compact .category { padding-block: 18px; }
.compact .site-footer { min-height: 85px; height: 85px; }
.compact .site-footer .brand { width: 77px; }
.compact .footer-info { gap: 7px; }
.compact.neon .hero-art { height: min(405px,54svh); }
.compact.crimson .hero-art { height: min(500px,60svh); }
.compact.ivory .hero-art, .compact.emerald .hero-art { height: min(470px,59svh); }
.compact.ivory .hero, .compact.emerald .hero { gap: 65px; }
.compact.aurora .scene { width: min(400px,48svh); height: min(400px,48svh); }
.compact.aurora .hero-art { height: min(435px,54svh); }
.compact.chrome .hero-art { height: min(445px,55svh); }
.compact.pop .hero-art { height: min(380px,49svh); }
.compact.pop h1 { width: min(440px,32vw); }
.compact.mythic .hero-art, .compact.cinema .hero-art { height: 100%; inset: 0; width: 100%; }
.compact.mythic .hero, .compact.cinema .hero { grid-template-columns: 1fr; }
.compact.mythic .hero-copy, .compact.cinema .hero-copy { padding-block: 130px 25px; }
.compact.mythic h1, .compact.cinema h1 { width: min(700px,65vw); gap: 25px; }
.compact.mythic .floating-logo { top: 40px; width: 135px; }
.compact.mythic .art-star { top: 112px; }
.compact.cinema .floating-logo { top: 38px; }
.compact.cinema .art-star { top: 99px; }
.compact.pop .category-strip { transform: none; box-shadow: 5px 5px 0 #191919; }
@media (min-width:761px) and (max-height:780px) {
  .compact h1 { width: min(330px,29vw); }
  .compact .kicker { margin-bottom: 15px; }
  .compact .description { margin-top: 18px; }
  .compact .actions { margin-top: 21px; }
  .compact .hero-art { height: min(380px,52svh); }
  .compact .site-header { height: 66px; min-height: 66px; }
  .compact .site-footer { height: 73px; min-height: 73px; }
  .compact main { grid-template-rows: minmax(0,1fr) 72px; }
  .compact.mythic .hero-art, .compact.cinema .hero-art { height: 100%; }
  .compact.mythic .hero-copy, .compact.cinema .hero-copy { padding-top: 110px; }
  .compact.mythic h1, .compact.cinema h1 { width: 600px; }
}
@media (max-width:1100px) and (min-width:761px) {
  .compact.ivory .hero, .compact.emerald .hero { gap: 35px; }
  .compact .category { gap: 12px; padding-inline: 17px; }
  .compact .category img { max-width: 95px; }
  .compact .actions { gap: 18px; }
  .compact .cta { gap: 15px; padding-inline: 18px; }
  .compact .more { gap: 10px; }
}
@media (max-width:760px) {
  body.compact { min-height: 640px; }
  .compact .wrap { width: calc(100% - 36px); }
  .compact .site-header { height: 62px; min-height: 62px; }
  .compact .site-header .brand { width: 92px; }
  .compact .site-header nav img { max-width: 95px; }
  .compact .site-header nav { gap: 8px; }
  .compact .site-header nav .nav-cta { padding: 8px; }
  .compact .site-header .nav-dot { display: none; }
  .compact main { grid-template-rows: minmax(0,1fr) 62px; }
  .compact .hero, .compact.ivory .hero, .compact.emerald .hero, .compact.aurora .hero, .compact.crimson .hero, .compact.chrome .hero, .compact.pop .hero { display: flex; justify-content: center; flex-direction: column; gap: 8px; }
  .compact .hero-copy, .compact.ivory .hero-copy { padding: 15px 0 7px; flex-shrink: 0; order: 1; }
  .compact h1, .compact.crimson .hero h1, .compact.ivory .hero h1, .compact.emerald h1, .compact.chrome h1, .compact.pop .hero h1, .compact.aurora .hero h1 { width: clamp(185px,28svh,244px); gap: 7px; }
  .compact .kicker { margin-bottom: 15px; }
  .compact .kicker img { max-width: 265px; max-height: 15px; width: auto; }
  .compact .description { margin-top: 15px; }
  .compact .description img { max-width: 275px; max-height: 22px; width: auto; }
  .compact .subline { margin-top: 8px; }
  .compact .subline img { max-height: 17px; width: auto; }
  .compact .actions { margin-top: 18px; gap: 17px; flex-wrap: nowrap; }
  .compact .cta, .compact .more { min-height: 43px; gap: 13px; }
  .compact .cta { padding: 12px 16px; }
  .compact .cta img { max-width: 111px; }
  .compact .more img { max-width: 88px; }
  .compact .hero-art, .compact.neon .hero-art, .compact.crimson .hero-art, .compact.ivory .hero-art, .compact.emerald .hero-art, .compact.aurora .hero-art, .compact.chrome .hero-art, .compact.pop .hero-art { width: min(100% - 30px,330px); height: clamp(155px,25svh,245px); margin: 5px 0 22px; flex-shrink: 0; order: 2; }
  .compact .floating-logo { width: 95px; padding: 10px; bottom: 8px; right: 10px; }
  .compact .category-strip { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .compact .category { border-bottom: 0; border-right: 1px solid color-mix(in srgb,var(--fg) 15%,transparent); padding: 13px 7px; gap: 8px; justify-content: center; }
  .compact .category:last-child { border-right: 0; }
  .compact .category img { max-width: 68px; max-height: 18px; width: auto; }
  .compact .category-mark { width: 15px; height: 15px; }
  .compact .category-mark::after { inset: 3px; }
  .compact .category > .arrow { display: none; }
  .compact .site-footer { height: 75px; min-height: 75px; padding-block: 12px 10px; flex-direction: column; gap: 8px; justify-content: center; }
  .compact .site-footer > .brand { display: none; }
  .compact .footer-info { gap: 6px; }
  .compact .footer-info p:first-child img { max-height: 13px; width: auto; }
  .compact .footer-info p:last-child img { max-width: 280px; max-height: 12px; width: auto; }
  .compact .site-footer > p img { max-height: 10px; width: auto; }
  .compact.neon .hero-art { height: clamp(155px,23svh,220px); }
  .compact.neon .floating-logo { width: 120px; padding: 13px; bottom: -12px; right: -5px; }
  .compact.crimson .hero-art { width: 100%; }
  .compact.crimson .floating-logo { right: 45px; width: 105px; bottom: 18px; }
  .compact.ivory .hero-art, .compact.emerald .hero-art { width: min(100% - 45px,280px); }
  .compact.ivory .scene, .compact.emerald .scene { border-radius: 160px 160px 0 0; }
  .compact.ivory .floating-logo, .compact.emerald .floating-logo { bottom: -10px; right: -15px; width: 120px; padding: 15px; }
  .compact.emerald .kicker { padding-top: 12px; }
  .compact.aurora .scene { width: clamp(155px,25svh,220px); height: clamp(155px,25svh,220px); }
  .compact.aurora .hero-art { margin-bottom: 13px; }
  .compact.aurora .floating-logo { bottom: -6px; width: 95px; }
  .compact.aurora .category-strip { border-radius: 12px; }
  .compact.chrome .floating-logo { width: 110px; padding: 13px; bottom: 0; }
  .compact.pop .hero h1 { width: clamp(200px,31svh,255px); }
  .compact.pop h1 picture { padding: 7px 12px; border-width: 2px; box-shadow: 4px 4px 0 #191919; }
  .compact.pop .hero-art { width: min(100% - 55px,300px); height: clamp(150px,21svh,200px); margin-top: 10px; margin-bottom: 26px; }
  .compact.pop .floating-logo { width: 115px; padding: 13px; bottom: -15px; right: -10px; }
  .compact.pop .art-star { width: 31px; height: 31px; top: -21px; }
  .compact.pop .category-strip { width: calc(100% - 44px); }
  .compact.mythic .hero, .compact.cinema .hero { display: grid; place-items: center; width: calc(100% - 20px); }
  .compact.mythic .hero-art, .compact.cinema .hero-art { position: absolute; inset: 0; height: 100%; width: 100%; margin: 0; }
  .compact.mythic .hero-copy, .compact.cinema .hero-copy { padding: 100px 10px 15px; }
  .compact.mythic h1, .compact.cinema h1 { display: grid; width: clamp(185px,30svh,255px); gap: 9px; }
  .compact.mythic h1 picture { width: 100%; }
  .compact.mythic .floating-logo, .compact.cinema .floating-logo { padding: 0; top: 32px; width: 120px; left: 50%; right: auto; bottom: auto; }
  .compact.mythic .art-star, .compact.cinema .art-star { top: 95px; }
  .compact.cinema .hero { width: 100%; }
}
@media (max-width:360px) {
  .compact .wrap { width: calc(100% - 28px); }
  .compact .actions { gap: 11px; }
  .compact .cta { padding-inline: 12px; gap: 10px; }
  .compact .cta img { max-width: 105px; }
  .compact .more { gap: 9px; }
  .compact .more img { max-width: 83px; }
  .compact .category { gap: 6px; }
  .compact .category img { max-width: 62px; }
  .compact .description img { max-width: 268px; }
}
@media (max-height:639px) {
  body.compact { height: auto; min-height: 640px; }
  .compact main { min-height: 500px; grid-template-rows: minmax(0,1fr) 62px; }
}