@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Libre+Baskerville:wght@400;700&display=swap');
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; }
body {
  font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  background: #fff;
  color: #000;
  border: 1px solid #eee;
}
a { color: #00e; text-decoration: underline; }
a.active { color: #c00; }
.site { height: 100vh; height: 100svh; display: flex; flex-direction: column; overflow: hidden; }
.header { text-align: center; padding-top: 22px; flex: 0 0 auto; }
.symbols { font-size: 42px; line-height: .95; word-spacing: 34px; margin-bottom: 16px; font-family: 'Libre Baskerville', Georgia, serif; }
.nav { font-family: 'Libre Baskerville', Georgia, serif; font-size: 18px; font-weight: 700; line-height: 1; }
.nav span { color: #000; padding: 0 5px; font-weight: normal; }
.main { flex: 1 1 auto; width: 100%; min-height: 0; overflow: hidden; }
.home-wrap { position: relative; max-width: 1120px; margin: 24px auto 0; height: calc(100vh - 142px); height: calc(100svh - 142px); min-height: 0; }
.hero-stage { position: relative; width: 100%; margin: 0 auto; }
.hero-img { display: block; width: min(34vw, 520px, 58vh); width: min(34vw, 520px, 58svh); height: auto; margin: 0 auto; }
.name { position: absolute; left: 0; top: 47%; transform: translateY(-50%); font-family: 'Abril Fatface', Georgia, serif; font-size: clamp(72px, 7vw, 118px); font-weight: 400; letter-spacing: -2px; }
.tag { position: absolute; right: 0; top: 66%; font-family: Arial, Helvetica, sans-serif; font-style: italic; font-weight: 900; font-size: clamp(38px, 4vw, 60px); }
.quote { text-align: center; margin-top: 26px; color: #666; font-style: italic; font-weight: 700; font-size: 14px; }
.sub { text-align: center; margin-top: 4px; font-size: 14px; }
.page-wrap { max-width: 880px; margin: 34px auto 0; }
h1 { font-family: 'Abril Fatface', Georgia, serif; font-size: 44px; margin: 0 0 14px; line-height: 1; font-weight: 400; }
.rule { border: 0; border-top: 1px solid #ccc; margin: 0 0 62px; }
.coming { text-align: center; color: #666; font-size: 24px; font-style: italic; font-weight: 700; }
.audio-list { margin-top: -26px; }
.track { display: grid; grid-template-columns: 55px 1fr; gap: 0; border-bottom: 1px solid #eee; padding: 15px 0; font-size: 20px; font-family: 'Libre Baskerville', Georgia, serif; }
.num { color: #aaa; font-family: 'Libre Baskerville', Georgia, serif; font-size: 16px; text-align: center; font-weight: 700; }
.footer { text-align: center; border-top: 1px solid #eee; color: #777; font-size: 13px; padding: 10px 0; flex: 0 0 auto; }

/* keep the desktop layout from your uploaded version, but shrink safely on short windows */
@media (max-height: 780px) and (min-width: 901px) {
  .header { padding-top: 16px; }
  .symbols { font-size: 38px; margin-bottom: 14px; }
  .nav { font-size: 17px; }
  .home-wrap { margin-top: 18px; height: calc(100vh - 112px); height: calc(100svh - 112px); }
  .hero-img { width: min(31vw, 465px, 52vh); width: min(31vw, 465px, 52svh); }
  .quote { margin-top: 22px; font-size: 13px; }
  .sub { font-size: 13px; margin-top: 4px; }
  .footer { font-size: 12px; padding: 8px 0; }
}

/* Mobile: arranged to match your reference: pushed-down header, text stays over image, quote below, footer safe. */
@media (max-width: 900px) {
  html, body { height: 100%; overflow: hidden; }
  .site { height: 100vh; height: 100svh; min-height: 0; overflow: hidden; }

  .header {
    padding-top: clamp(46px, 7.2svh, 70px);
    flex: 0 0 auto;
  }
  .symbols {
    font-size: 39px;
    word-spacing: 34px;
    margin-bottom: 30px;
    line-height: .9;
  }
  .nav {
    font-size: 18px;
    line-height: 1;
  }
  .nav span { padding: 0 3px; }

  .home-wrap {
    margin: clamp(56px, 7.8svh, 78px) auto 0;
    padding: 0 14px;
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible;
    max-width: 100%;
  }
  .hero-stage {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    flex: 0 1 auto;
  }
  .hero-img {
    display: block;
    height: min(43svh, 405px);
    width: auto;
    max-width: 84vw;
    object-fit: contain;
    margin: 0 auto;
  }
  .name {
    position: absolute;
    left: -31px;
    top: auto;
    bottom: 17%;
    transform: none;
    font-size: clamp(50px, 17vw, 78px);
    letter-spacing: -2px;
    line-height: .9;
    z-index: 2;
  }
  .tag {
    position: absolute;
    right: -42px;
    top: auto;
    bottom: -23px;
    font-size: clamp(34px, 11vw, 56px);
    line-height: .9;
    z-index: 3;
  }
  .quote {
    font-size: 13px;
    margin-top: clamp(62px, 8svh, 78px);
    line-height: 1.15;
    white-space: nowrap;
  }
  .sub {
    font-size: 13px;
    margin-top: 5px;
    line-height: 1.1;
  }
  .footer {
    font-size: 12px;
    padding: 7px 0;
    flex: 0 0 auto;
  }

  .page-wrap { margin: 28px 22px 0; max-height: calc(100svh - 110px); overflow: hidden; }
  h1 { font-size: 38px; }
  .rule { margin-bottom: 46px; }
  .coming { font-size: 22px; }
  .track { grid-template-columns: 42px 1fr; padding: 13px 0; font-size: 16px; }
  .num { font-size: 13px; }
}

@media (max-width: 430px) {
  .header { padding-top: clamp(44px, 7svh, 64px); }
  .symbols { font-size: 36px; word-spacing: 31px; margin-bottom: 30px; }
  .nav { font-size: 17px; }
  .home-wrap { margin-top: clamp(58px, 8svh, 76px); }
  .hero-img { height: min(42.5svh, 395px); max-width: 84vw; }
  .name { left: -28px; bottom: 17%; font-size: clamp(48px, 16.5vw, 72px); }
  .tag { right: -39px; bottom: -22px; font-size: clamp(32px, 10.5vw, 52px); }
  .quote { font-size: 12px; margin-top: clamp(60px, 7.8svh, 74px); }
  .sub { font-size: 12px; }
}

/* Very short phone/windows: shrink carefully, but keep ordering and prevent footer collisions. */
@media (max-width: 900px) and (max-height: 760px) {
  .header { padding-top: clamp(28px, 4.8svh, 42px); }
  .symbols { font-size: 33px; word-spacing: 26px; margin-bottom: 22px; }
  .nav { font-size: 16px; }
  .home-wrap { margin-top: clamp(36px, 5.5svh, 52px); }
  .hero-img { height: min(39svh, 335px); max-width: 80vw; }
  .name { left: -24px; bottom: 16%; font-size: clamp(42px, 14vw, 62px); }
  .tag { right: -31px; bottom: -17px; font-size: clamp(28px, 9vw, 44px); }
  .quote { margin-top: clamp(44px, 6svh, 58px); font-size: 11px; }
  .sub { font-size: 11px; }
  .footer { font-size: 10px; padding: 5px 0; }
}

@media (max-width: 360px) {
  .symbols { font-size: 31px; word-spacing: 23px; }
  .nav { font-size: 15px; }
  .hero-img { height: min(40svh, 320px); max-width: 80vw; }
  .quote { font-size: 10.5px; }
}