/* Base layout */
    html, body { height: 100%; margin: 0; }
    body { font-family: system-ui, -apple-system, "PingFang TC", "-apple-system", "Noto Sans CJK TC", sans-serif; }

    /* Make master page behave like a classic header-content-footer layout */
    #masterPage {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    /* iframe embed styling */
    .embed-frame {
      width: 100%;
      border: 0;
      display: block;
      overflow: hidden;
      background: transparent;
    }

    /* You can set fixed heights, or resize dynamically (see JS below) */
    #headerFrame { height: 72px; }
    #footerFrame { height: 250px; }

    /* Main content expands */
    #PAGES_CONTAINER { flex: 1; }
    #SITE_PAGES img { width: 100%; height: auto; display: block; }

    /* Intro section background */
    .intro-section {
      width: 100%;
      padding: 80px 0px;
      background: linear-gradient(135deg, #8bbf8a 0%, #2fa4b6 50%, #1f6fae 100%);
      display: flex;
      justify-content: center;
    }
	
	
	
	

    /* Cream card */
    .intro-card {
      max-width: 860px;
      width: 100%;
      background: #fff7d6;
      padding: 48px 56px 40px;
      box-shadow: 0 12px 30px rgba(0,0,0,0.18);
    }

    /* Title */
    .intro-title {
      margin: 0 0 24px;
      font-size: 22px;
      font-weight: 700;
    }

    /* Body text */
    .intro-card p {
      margin: 0 0 16px;
      font-size: 14px;
      line-height: 1.9;
    }

    /* Meta block */
    .intro-meta {
      margin-top: 28px;
    }
    .intro-meta p {
      margin: 0 0 6px;
    }

    /* Action buttons (match screenshot: 2 stacked rounded pills) */
    .intro-actions{
      margin-top: 28px;
      display: flex;
      flex-direction: column; /* stack */
      gap: 16px; /* spacing between pills */
      align-items: center; /* center pills */
    }
    .pill-btn{
      width: min(520px, 92%); /* wide pill like screenshot */
      height: 44px;
      border: 2px solid #9b6a4a; /* brown outline */
      border-radius: 999px;
      background: transparent;
      color: #7a4f34;
      font-size: 16px;
      font-weight: 600;
      text-decoration: none;
      display: flex;
      align-items: center;
      justify-content: center; /* text centered */
      position: relative; /* for icon positioning */
      box-sizing: border-box;
    }

    /* Right-side icon chip (download button only) */
    .pill-btn .pill-icon{
      position: absolute;
      right: 14px;
      width: 26px;
      height: 26px;
      border-radius: 999px;
      border: 2px solid #9b6a4a;
      display: grid;
      place-items: center;
      font-size: 14px;
      line-height: 1;
    }

    /* Hover/active */
    .pill-btn:hover{
      background: rgba(155, 106, 74, 0.08);
    }
    .pill-btn:active{
      transform: translateY(1px);
    }

    /* Responsive */
    @media (max-width: 640px) {
      .intro-card { padding: 36px 28px; }
    }

      .go-up{
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .55rem .9rem;
    border: 1px solid rgba(0,0,0,.18);
    border-radius: 999px;
    background: #ffffff;
    color: #111;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
    transition: transform .12s ease, box-shadow .12s ease;
    margin: 0 0 12px 0; /* spacing below button before 展覽引言 */
  }
  .go-up:hover{
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
  }
  .go-up:active{
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
  }
  .go-up:focus{
    outline: 3px solid rgba(0,120,212,.35);
    outline-offset: 2px;
  }

  /* ===============================
   Global reset / spacing control
   =============================== */

html, body {
  margin: 0;
  padding: 0;
}

body {
  line-height: 1.5;
}

/* Make media (images/banners) not create unexpected whitespace */
img, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Common elements often responsible for large gaps */
h1, h2, h3, h4, h5, h6,
p, ul, ol, dl,
blockquote, figure {
  margin-top: 0;
}

/* Default spacing (desktop/tablet) - moderate */
h1, h2, h3 { margin-bottom: 0.75rem; }
h4, h5, h6 { margin-bottom: 0.5rem; }
p, ul, ol, dl, blockquote { margin-bottom: 1rem; }

/* Links/buttons row spacing */
a, button {
  text-decoration: none;
}

/* If your layout uses a wrapper/container, keep it sane */
.container, .wrapper, main, .content, .page, .section {
  padding-top: 0;
  padding-bottom: 0;
}

/* Footer spacing baseline */
footer {
  margin-top: 0;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

/* ===============================
   Mobile tightening
   =============================== */
@media (max-width: 768px) {

  /* Overall page padding often causes large top/bottom gaps */
  body {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Tighten common wrappers (prevents big gaps between blocks) */
  .container, .wrapper, main, .content, .page, .section,
  header, footer {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Banner area: common patterns that create “space under banner” */
  .banner, .hero, .masthead, .page-banner, .header-banner {
    margin-bottom: 0.5rem !important;
    padding-bottom: 0 !important;
  }

  /* If banner is an image inside a banner wrapper */
  .banner img, .hero img, .masthead img, .page-banner img, .header-banner img {
    margin-bottom: 0 !important;
  }

  /* Intro section: tighten top/bottom spacing */
  .intro, .introduction, .exhibition-intro, .intro-section, .content-intro {
    margin-top: 0.5rem !important;
    margin-bottom: 0.75rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* If your intro content is just headings + paragraphs, tighten them */
  h1, h2, h3 {
    margin-bottom: 0.5rem !important;
  }
  p, ul, ol, dl, blockquote {
    margin-bottom: 0.75rem !important;
  }

  /* Common “spacer” helpers used in templates that inflate gaps */
  .spacer, .space, .gap, .divider, .separator,
  .mt-5, .mt-4, .mt-3, .mt-2,
  .mb-5, .mb-4, .mb-3, .mb-2,
  .py-5, .py-4, .py-3, .py-2,
  .pt-5, .pt-4, .pt-3, .pt-2,
  .pb-5, .pb-4, .pb-3, .pb-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  /* Reduce top margin on first content element after banner */
  .banner + *, .hero + *, .masthead + *, .page-banner + *, .header-banner + * {
    margin-top: 0.5rem !important;
    padding-top: 0 !important;
  }

  /* Reduce bottom margin on last element before footer */
  *:not(footer) + footer {
    margin-top: 0.75rem !important;
  }

  /* Footer: reduce large separation above it on mobile */
  footer {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }

  /* If your footer is inside a wrapper */
  .footer, .site-footer, .page-footer {
    margin-top: 0.75rem !important;
    padding-top: 0.75rem !important;
  }
}

/* ===============================
   Extra: prevent anchor "back to top" area creating big blocks
   (Your snippet shows a "返回頁頂" / back-to-top link) [1](https://mailouhkedu-my.sharepoint.com/personal/wwyng_live_hkmu_edu_hk/Documents/Microsoft%20Copilot%20Chat%20Files/index%20%282%29.txt)
   =============================== */
@media (max-width: 768px) {
  .back-to-top, .to-top, .top-link {
    margin: 0.5rem 0 !important;
    padding: 0.25rem 0 !important;
  }
}