/* The artwork has one responsive coordinate system; its layout box never scales. */
.hero-brand-mobile { display: none; }
@media (max-width: 959px) {
  .nav-inner { height: 80px; padding-inline: 22px; }
  .nav-inner .brand img { width: 58px; height: 58px; margin-left: -10px; }
  .nav-inner .brand span { font-size: 28px; }
  .nav-toggle { width: 44px; height: 44px; }
  .hero { min-height: 0; }
  .hero-atmosphere {
    background-image:
      linear-gradient(180deg, #0c0810d9 0%, #0c0810c4 23%, #0c081029 44%, #0c08104d 64%, #0c0810e8 80%, #0c0810 100%),
      url('assets/bg-library.jpg');
    background-size: cover;
    background-position: center, 69% 56%;
    opacity: 1;
  }
  .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    width: 100%;
    max-width: 480px;
    min-height: 0;
    padding: 102px 24px 36px;
    text-align: center;
  }
  .hero-copy { display: contents; }
  .hero-eyebrow, .hero-intro, .hero-description, .small-rule,
  .hero-brand-desktop, .orbit, .art-poem, .art-caption, .scroll-cue { display: none; }
  .hero-eyebrow-sp {
    display: block;
    grid-row: 1;
    margin: 0;
    color: var(--gold);
    font: 400 11px/1.8 var(--serif-jp);
    letter-spacing: .12em;
  }
  .hero-brand {
    grid-row: 2;
    position: relative;
    z-index: 4;
    width: auto;
    height: auto;
    margin: 14px 0 0;
    padding: 0;
    font: 400 clamp(24px, 7.2vw, 32px)/1.6 var(--serif-jp);
    letter-spacing: .025em;
    white-space: normal;
  }
  .hero-brand-mobile { display: block; }
  .hero-art {
    grid-row: 3;
    position: relative;
    width: 100%;
    max-width: 376px;
    height: auto;
    aspect-ratio: 340 / 388;
    margin: 24px auto 0;
    left: auto;
    transform: none;
  }
  .hero-phone {
    width: 41%;
    height: auto;
    left: 6%;
    top: 4%;
    transform: rotate(-3deg);
    padding: 5px 5px 10px;
    border: 1px solid #80737e;
    border-radius: 25px;
    box-shadow: inset 0 1px 0 #e8dfed80, inset -1px 0 0 #b5a9bb66, 8px 16px 30px #0009;
  }
  .hero-phone img { width: 100%; height: auto; flex: none; object-fit: contain; border-radius: 0 0 19px 19px; }
  .hero-phone .phone-status { height: 20px; padding: 3px 9px 5px; font-size: 7px; background: #0b080e; border-radius: 20px 20px 0 0; }
  .hero-phone .phone-status:before { top: 0; left: 34%; width: 32%; height: 9px; border-radius: 9px; aspect-ratio: auto; }
  .hero-phone .status-icons { height: 6px; gap: 2px; }
  .hero-phone .status-icons svg { height: 6px; }
  .hero-phone .phone-home { bottom: 5px; }
  .hero-art .card-moon {
    width: 30%;
    height: auto;
    left: 48%;
    top: 4%;
    transform: rotate(6deg);
    z-index: 1;
  }
  .hero-art .card-empress {
    width: 30%;
    height: auto;
    left: 66%;
    top: 42%;
    transform: rotate(9deg);
    z-index: 2;
  }
  .hero-art .floating-card { border-radius: 4px; box-shadow: 7px 13px 24px #0009; }
  .hero-description-sp {
    display: block;
    grid-row: 4;
    position: relative;
    z-index: 4;
    margin: 22px 0 0;
    font: 400 clamp(11px, 3.3vw, 14px)/1.9 var(--serif-jp);
    letter-spacing: .015em;
    color: var(--text);
  }
  .hero-cta { grid-row: 5; position: relative; z-index: 4; margin-top: 22px; }
  .hero-cta .store-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; justify-content: center; }
  .hero-cta .store-btn { min-width: 0; max-width: none; min-height: 51px; padding: 9px 10px; gap: 8px; border-color: #b29764; text-align: left; background: #08070bbd; }
  .hero-cta .store-icon { width: 23px; height: 25px; }
  .hero-cta .store-btn small { font-size: 10px; line-height: 1.35; }
  .hero-cta .store-btn strong { font-size: clamp(14px, 4.2vw, 18px); line-height: 1.3; white-space: nowrap; }
  .hero-cta .hero-note { margin: 16px 0 0; font-size: 9px; line-height: 1.8; letter-spacing: .015em; }
}
@media (max-width: 359px) {
  .hero-inner { padding-inline: 18px; }
  .hero-cta .store-links { gap: 8px; }
  .hero-phone .phone-status { padding-inline: 6px; font-size: 6px; }
  .hero-phone .status-icons, .hero-phone .status-icons svg { height: 5px; }
}