@charset "utf-8";
:root {
  --mf-ink: #15110f;
  --mf-ink-2: #2b211b;
  --mf-warm: #fff8ef;
  --mf-card: #ffffffcc;
  --mf-line: rgba(83, 55, 36, .14);
  --mf-gold: #f6c879;
  --mf-amber: #e58f4b;
  --mf-rose: #e97a6d;
  --mf-mint: #8bd6c6;
  --mf-blue: #77a7ff;
  --mf-brown: #5b3928;
  --mf-shadow: 0 22px 60px rgba(42, 24, 13, .14);
  --mf-shadow-strong: 0 30px 90px rgba(0, 0, 0, .26);
  --mf-radius: 28px;
}
* {
  box-sizing: border-box
}
html {
  font-size: 18px;
  scroll-behavior: smooth
}
body {
  margin: 0;
  font-family: 'Noto Sans TC', 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.75;
  color: var(--mf-ink-2);
  background: radial-gradient(circle at 8% 5%, rgba(246, 200, 121, .25), transparent 28%), radial-gradient(circle at 92% 12%, rgba(139, 214, 198, .18), transparent 24%), linear-gradient(180deg, #fffaf4 0%, #fbf1e7 42%, #f7eadc 100%);
  overflow-x: hidden;
    
}
a {
  transition: color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease
}
a:focus-visible, button:focus-visible {
  outline: 4px solid rgba(246, 200, 121, .7);
  outline-offset: 3px
}
.skip-link {
  position: absolute;
  left: -999px;
  top: 10px;
  z-index: 3000;
  background: #000;
  color: #fff;
  padding: .55rem 1rem;
  border-radius: 999px;
  text-decoration: none
}
.skip-link:focus {
  left: 10px
}
.container {
  max-width: 1180px
}
.text-gradient {
  background: linear-gradient(90deg, #fff, #ffe0ae, #aef3e5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}
.site-navbar {
  background: rgba(255, 250, 244, .78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(91, 57, 40, .1);
  box-shadow: 0 10px 34px rgba(56, 34, 22, .08)
}
.navbar-brand {
  gap: .7rem
}
.brand-logo {
  width: 64px;
  height: auto;
  filter: drop-shadow(0 8px 18px rgba(91, 57, 40, .14))
}
.navtitle {
  font-size: .85rem;
  line-height: 1.18;
  color: var(--mf-brown);
  font-weight: 700;
  letter-spacing: .02em
}
.nav-link {
  font-weight: 700;
  color: #5f4a3d !important;
  /*border-radius: 999px;*/
  padding: .55rem .95rem !important;
  margin: .08rem
}
.nav-link:hover, .nav-link.active {
  background: linear-gradient(135deg, rgba(246, 200, 121, .38), rgba(255, 255, 255, .7));
  color: #3d2518 !important;
  box-shadow: 0 10px 22px rgba(91, 57, 40, .1)
}
.navbar-toggler {
  border: 1px solid rgba(91, 57, 40, .18);
  /*border-radius: 14px;*/
  padding: .55rem .65rem
}
.site-home-header {
  position: absolute;
  z-index: 6;
  top: 0;
  left: 0;
  right: 0;
  color: #fff;
  padding: 1.1rem 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .48), rgba(0, 0, 0, 0))
}
.site-home-header img {
  width: 78px;
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .38))
}
.site-home-header h1 {
  text-shadow: 0 3px 14px rgba(0, 0, 0, .55);
  font-weight: 700;
  letter-spacing: .03em
}
.site-home-header small {
  font-weight: 600;
  color: rgba(255, 255, 255, .78)
}
.home-hero {
  position: relative;
  min-height: clamp(720px, 92vh, 980px);
  overflow: hidden;
  background: #120d0b;
  display: flex;
  align-items: center
}
.home-hero picture, .home-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 78% 26%, rgba(246, 200, 121, .22), transparent 22%), radial-gradient(circle at 16% 76%, rgba(139, 214, 198, .14), transparent 24%), linear-gradient(90deg, rgba(10, 8, 7, .88), rgba(17, 12, 9, .58) 48%, rgba(17, 12, 9, .22)), linear-gradient(0deg, rgba(10, 8, 7, .82), transparent 52%);
  z-index: 1
}
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, transparent, black 20%, black 70%, transparent);
  z-index: 1;
  pointer-events: none
}
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 9rem 0 5rem;
  color: #fff
}
.hero-copy {
  max-width: 760px
}
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .42rem .85rem;
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
  backdrop-filter: blur(12px);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 1rem
}
.hero-kicker i {
  color: var(--mf-gold)
}
.hero-title {
 
  font-size: clamp(3.1rem, 9vw, 7rem);
  font-weight: 700;
  line-height: .95;
  letter-spacing: .06em;
  margin: 0;
  text-shadow: 0 20px 60px rgba(0, 0, 0, .42)
}
.hero-subtitle {
  font-size: clamp(1.06rem, 2.1vw, 1.48rem);
  max-width: 720px;
  color: rgba(255, 255, 255, .88);
  margin: 1.25rem 0 1.85rem
}
.hero-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  max-width: 980px
}
.hero-action-card {
  display: flex;
  align-items: center;
  gap: .9rem;
  min-height: 112px;
  padding: 1.1rem;
  border-radius: 24px;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .07));
  border: 1px solid rgba(255, 255, 255, .24);
  box-shadow: var(--mf-shadow-strong);
  backdrop-filter: blur(16px);
  font-weight: 700
}
.hero-action-card i {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px; 
  color: #ffe2ad;
  font-size: 1.35rem
}
.hero-action-card span {
  font-size: 1.02rem
}
.hero-action-card small {
  display: block;
  font-size: .76rem;
  line-height: 1.45;
  font-weight: 550;
  color: rgba(255, 255, 255, .72);
  margin-top: .18rem
}
.hero-action-card:hover {
  transform: translateY(-6px);
  background: linear-gradient(135deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .11));
  color: #fff;
  border-color: rgba(246, 200, 121, .52)
}
.modern-section {
  position: relative;
  padding: 4.5rem 0
}
.section-eyebrow {
  display: inline-flex;
  gap: .45rem;
  align-items: center;
  font-weight: 700;
  color: #8a5633;
  background: rgba(246, 200, 121, .24);
  border: 1px solid rgba(229, 143, 75, .2);
  border-radius: 999px;
  padding: .25rem .75rem;
  font-size: .86rem
}
.section-title {
  font-size: clamp(1.8rem, 3vw, 3rem);
  font-weight: 600;
  line-height: 1.18;
  color: #2c1c13;
  margin: .8rem 0 .8rem
}
.section-desc {
  font-size: 1.08rem;
  color: #6a5142;
  max-width: 760px
}
.bento-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr .8fr;
  gap: 1rem
}
.bento-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--mf-radius);
  padding: 1.4rem;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(91, 57, 40, .1);
  box-shadow: var(--mf-shadow);
  min-height: 220px
}
.bento-card::after {
  content: "";
  position: absolute;
  right: -46px;
  top: -48px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(246, 200, 121, .38), transparent 68%)
}
.bento-card.feature {
  grid-row: span 2;
  min-height: 460px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .84), rgba(255, 241, 223, .68))
}
.bento-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: #fff2dc;
  color: #8a4d27;
  font-size: 1.4rem;
  margin-bottom: 1rem;
  box-shadow: 0 10px 22px rgba(91, 57, 40, .08)
}
.bento-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #3d2518;
  margin: 0 0 .55rem
}
.bento-card p {
  color: #604b3e;
  margin: 0
}
.bento-card .btn {
  margin-top: 1.1rem
}
.home-sponsors {
  background: rgba(255, 255, 255, .54);
  padding: 3rem 0 4rem
}
.home-sponsors .lead {
  color: #513a2c;
  font-weight: 600
}
.sponsor-logos {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1rem;
  align-items: stretch;
  max-width: 1020px;
  margin: 0 auto
}
.sponsor-group {
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(91, 57, 40, .1);
  border-radius: 26px;
  padding: 1.15rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  box-shadow: 0 14px 40px rgba(91, 57, 40, .08)
}
.sponsor-label {
  font-weight: 700;
  color: #5c3b29
}
.sponsor-pair {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center
}
.logo-box img {
  max-height: 58px;
  max-width: 220px;
  width: auto;
  height: auto;
  transition: transform .2s ease, filter .2s ease
}
.logo-box:hover img {
  transform: translateY(-2px) scale(1.04);
  filter: drop-shadow(0 10px 16px rgba(91, 57, 40, .18))
}
.page-content {
  padding-bottom: 2rem
}
.hero-banner {
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(22, 14, 11, .85), rgba(91, 57, 40, .62)), url('../images/banner.jpg') center/cover no-repeat
}
.hero-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 20%, rgba(246, 200, 121, .28), transparent 28%), linear-gradient(0deg, rgba(22, 14, 11, .72), transparent 72%)
}
.hero-banner::after {
  content: "";
  position: absolute;
  inset: auto 18% 0;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--mf-gold), var(--mf-mint), transparent)
}
.hero-banner h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(2.2rem, 6vw, 4.4rem);
  font-weight: 700;
  letter-spacing: .08em;
  text-shadow: 0 16px 42px rgba(0, 0, 0, .45)
}
.content-shell {
  width: min(1140px, calc(100% - 2rem));
  margin: 2.2rem auto 0
}
.content-shell.wide {
  width: min(1240px, calc(100% - 2rem))
}
.section-card, .tab-content {
  border: 1px solid rgba(91, 57, 40, .1) !important;
  border-radius: var(--mf-radius) !important;
  background: rgba(255, 255, 255, .72) !important;
  box-shadow: var(--mf-shadow);
  backdrop-filter: blur(10px)
}
.nav-tabs {
  border-bottom: 0;
  gap: .55rem
}
.nav-tabs .nav-link {
  border: 1px solid rgba(91, 57, 40, .08) !important;
  background: rgba(255, 255, 255, .58) !important;
  color: #5f4637 !important;
  border-radius: 10% !important;
  font-weight: 700 !important;
  padding: .72rem 1.05rem !important
}
.nav-tabs .nav-link.active {
  background: linear-gradient(135deg, #4d3022, #845130) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(91, 57, 40, .18)
}
.tab-content {
  padding: 1.6rem !important;
  line-height: 1.95
}
.tab-pane p {
  color: #49382f
}
.tab-pane h3 {
  font-weight: 700;
  color: #4d3022;
  margin-top: 1.4rem
}
.events-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem
}
.events-section-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #4d3022;
  letter-spacing: .03em;
  margin: 0 0 .85rem;
  display: flex;
  align-items: center;
  gap: .5rem
}
.events-section-title::before {
  content: "";
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  background: var(--mf-amber);
  box-shadow: 0 0 0 6px rgba(229, 143, 75, .14)
}
.list-group {
  gap: .9rem
}
.event-item, .detail-card, .sci-card, .video-card {
  border: 1px solid rgba(91, 57, 40, .09) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, .74) !important;
 /* box-shadow: 0 16px 42px rgba(91, 57, 40, .1);*/
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease
}
.event-item {
  padding: 1.1rem 1.15rem;
  margin-bottom: .85rem
}
.event-item:hover, .sci-card:hover, .video-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(91, 57, 40, .16);
  border-color: rgba(229, 143, 75, .28) !important
}
.event-item.is-top {
  background: linear-gradient(135deg, rgba(255, 246, 232, .95), rgba(255, 255, 255, .7)) !important
}
.event-title, .video-title {
  font-weight: 700;
  color: #352116;
  margin: 0
}
.event-date {
  color: #7a604f;
  font-size: .92rem;
  white-space: nowrap;
  font-weight: 650
}
.event-desc, .video-desc {
  color: #5a4639;
  margin: .45rem 0 .25rem;
  line-height: 1.72
}
.event-badge, .detail-badge, .sci-badge, .video-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .78rem;
  font-weight: 700;
  padding: .28rem .66rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(246, 200, 121, .28), rgba(255, 255, 255, .7));
  color: #7a4524;
  border: 1px solid rgba(229, 143, 75, .16);
  margin-right: .4rem
}
.event-linkhint {
  font-weight: 700;
  color: #98542c
}
.btn-warm-primary {
  --bs-btn-color: #2b1b12;
  --bs-btn-bg: #f6c879;
  --bs-btn-border-color: #f6c879;
  --bs-btn-hover-color: #1d120b;
  --bs-btn-hover-bg: #ffd891;
  --bs-btn-hover-border-color: #ffd891;
  font-weight: 700;
  border-radius: 999px;
  padding: .78rem 1.55rem;
  box-shadow: 0 12px 28px rgba(229, 143, 75, .22)
}
.btn-outline-secondary {
  border-radius: 999px;
  font-weight: 650
}
.detail-card-header {
  background: linear-gradient(135deg, rgba(255, 241, 223, .88), rgba(255, 255, 255, .68));
  padding: 1.35rem;
  border-bottom: 1px solid rgba(91, 57, 40, .08)
}
.detail-title {
  margin: 0;
  font-weight: 700;
  color: #352116;
  font-size: clamp(1.35rem, 3vw, 2.1rem)
}
.detail-meta {
  margin-top: .6rem;
  color: #735949;
  font-weight: 650;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.2rem;
  align-items: center
}
.detail-body {
  padding: 1.35rem
}
.detail-h {
  font-size: 1.22rem;
  font-weight: 700;
  color: #4d3022;
  margin: 0 0 .55rem
}
.detail-text {
  color: #49382f;
  line-height: 1.9;
  margin: 0
}
.detail-divider {
  border: 0;
  border-top: 1px solid rgba(91, 57, 40, .12);
  margin: 1.2rem 0
}
.detail-link a {
  font-weight: 700;
  color: #98542c;
  text-decoration: none
}
.sci-bg-cream, .sci-bg-apricot, .sci-bg-latte, .sci-bg-blush, .sci-bg-rose {
  background: rgba(255, 255, 255, .72) !important
}
.sci-card .card-body {
  padding: 1.25rem
}
.sci-card .card-title {
  font-weight: 700;
  color: #352116
}
.sci-card .card-text {
  color: #554236;
  line-height: 1.78
}
.video-card .video-body {
  padding: 1rem 1.1rem 1.05rem
}
.video-meta {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .65rem
}
.ratio iframe {
  border: 0
}
.site-footer {
  background: radial-gradient(circle at 15% 0%, #4d3022 0%, #19110d 46%, #050404 100%);
  margin-top: 4rem;
  font-size: .92rem;
  position: relative;
  overflow: hidden
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(180deg, black, transparent 88%)
}
.site-footer .container {
  position: relative;
  z-index: 1
}
.footer-logo {
  width: 64px;
  height: auto
}
.footer-note {
  color: rgba(255, 255, 255, .72)
}
.contact-list {
  list-style: none;
  padding: 0
}
.contact-list li {
  position: relative;
  padding-left: 1.7em;
  margin-bottom: .55em
}
.contact-list li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-family: "Font Awesome 6 Free";
  font-weight: 700;
  color: #f6c879
}
.contact-list li.email::before {
  content: "\f0e0"
}
.contact-list li.phone::before {
  content: "\f095"
}
.contact-list li.fax::before {
  content: "\f1ac"
}
.contact-list li.box::before {
  content: "\f49e"
}
.contact-list li.addr::before {
  content: "\f3c5"
}
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease
}
.reveal.is-visible {
  opacity: 1;
  transform: none
}
@media (max-width:991.98px) {
  html {
    font-size: 17px
  }
  .home-hero {
    min-height: 100vh;
    align-items: flex-end
  }
  .hero-actions {
    grid-template-columns: 1fr
  }
  .hero-action-card {
    min-height: auto
  }
  .bento-grid {
    grid-template-columns: 1fr
  }
  .bento-card.feature {
    grid-row: auto;
    min-height: 260px
  }
  .sponsor-logos {
    grid-template-columns: 1fr
  }
  .site-home-header .container {
    justify-content: center !important;
    text-align: center
  }
  .site-home-header img {
    width: 64px
  }
  .brand-logo {
    width: 56px
  }
  .navtitle {
    font-size: .78rem
  }
  .hero-copy {
    max-width: 100%
  }
  .navbar-collapse {
    padding-top: .8rem
  }
  .nav-link {
    padding: .65rem .85rem !important
  }
  .hero-banner {
    min-height: 300px
  }
}
@media (max-width:575.98px) {
  html {
    font-size: 16px
  }
  .site-home-header {
    padding: .8rem 0
  }
  .site-home-header h1 {
    font-size: .95rem !important
  }
  .hero-inner {
    padding: 7.8rem 0 2.5rem
  }
  .hero-title {
    font-size: 3.25rem;
    letter-spacing: .03em
  }
  .hero-subtitle {
    font-size: 1rem
  }
  .hero-action-card {
    border-radius: 20px;
    padding: .9rem
  }
  .modern-section {
    padding: 3rem 0
  }
  .hero-banner {
    min-height: 240px
  }
  .content-shell {
    width: min(100% - 1rem, 1140px);
    margin-top: 1.1rem
  }
  .tab-content {
    padding: 1rem !important
  }
  .nav-tabs .nav-link {
    font-size: .92rem;
    padding: .6rem .8rem !important
  }
  .event-date {
    white-space: normal
  }
  .logo-box img {
    max-width: 180px
  }
  .site-footer {
    font-size: .86rem
  }
  .bento-card {
    border-radius: 22px;
    min-height: auto
  }
  .sponsor-group {
    border-radius: 22px
  }
  .events-toolbar {
    align-items: flex-start
  }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition: none !important
  }
  .reveal {
    opacity: 1;
    transform: none
  }
}
/* 2026 clean hero v3: image-first homepage + tag buttons */
.home-hero {
  position: relative;
  min-height: clamp(680px, 92vh, 960px);
  overflow: hidden;
  background: #0f0c0a;
  display: block;
}
.home-hero picture, .home-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.home-hero::before, .home-hero::after {
  display: none !important;
  content: none !important;
}
.hero-inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  padding: 0;
  color: #fff;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}
.hero-inner > .container {
  padding-bottom: clamp(2.2rem, 6vh, 5rem);
  pointer-events: auto;
}
.hero-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  max-width: none;
  margin: 0 auto;
}
.hero-action-card {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  min-height: auto;
  padding: .9rem 1.18rem;
  border-radius: 999px;
  color: #2f2118;
  text-decoration: none;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(255, 255, 255, .72);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .18);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-weight: 700;
}
.hero-action-card i {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  min-width: 2.15rem;
  border-radius: 999px; 
  font-size: 1.5rem;
}
.hero-action-card span {
  font-size: .98rem;
  white-space: nowrap;
}
.hero-action-card small {
  display: none;
}
.hero-action-card:hover {
  transform: translateY(-4px);
  color: #2f2118;
  background: #fff;
  border-color: rgba(246, 200, 121, .82);
  box-shadow: 0 22px 58px rgba(0, 0, 0, .22);
}
/* Inner page tag-like buttons: use .tag-btn without overriding all Bootstrap buttons */
.tag-btn, .page-content .btn-warm-primary, .page-content .btn-outline-secondary, .page-content .btn-learning, .page-content .filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .38rem;
  border-radius: 999px !important;
  padding: .48rem .95rem !important;
  min-height: 2.35rem;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none !important;
  border: 1px solid rgba(138, 86, 51, .2) !important;
  background: rgba(255, 255, 255, .78) !important;
  color: #7a4524 !important;
  box-shadow: 0 8px 22px rgba(91, 57, 40, .08);
}
.tag-btn::before, .page-content .btn-warm-primary::before, .page-content .btn-outline-secondary::before, .page-content .btn-learning::before, .page-content .filter-btn::before {
  content: "";
  width: .46rem;
  height: .46rem;
  border-radius: 999px;
  background: var(--mf-amber, #e58f4b);
  box-shadow: 0 0 0 4px rgba(229, 143, 75, .13);
}
.tag-btn:hover, .page-content .btn-warm-primary:hover, .page-content .btn-outline-secondary:hover, .page-content .btn-learning:hover, .page-content .filter-btn:hover {
  transform: translateY(-2px);
  color: #4d3022 !important;
  border-color: rgba(229, 143, 75, .36) !important;
  box-shadow: 0 14px 32px rgba(91, 57, 40, .14);
}
.page-content .btn-lg {
  font-size: 1rem !important;
  padding: .56rem 1.12rem !important;
}
.page-content .btn-sm {
  font-size: .86rem !important;
  padding: .38rem .78rem !important;
}
@media (max-width: 991.98px) {
  .home-page .site-home-header {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 5;
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
  }
  .home-hero {
    min-height: 100vh;
    min-height: 100svh;
    height: 100vh;
    height: 100svh;
  }
  .home-hero picture, .home-hero img {
    object-position: center center;
  }
  .hero-inner {
    inset: 0;
  }
  .hero-inner > .container {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
  .hero-actions {
    justify-content: flex-start;
    gap: .55rem;
    overflow-x: auto;
    max-width: 100%;
    padding: .1rem .35rem .8rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .hero-action-card {
    flex: 0 0 auto;
    min-width: 8.4rem;
    padding: .68rem .78rem;
    scroll-snap-align: start;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
  }
  .hero-action-card i {
    width: 32px;
    height: 32px;
    min-width: 32px;
    font-size: .95rem;
  }
  .hero-action-card span {
    font-size: .9rem;
  }
}
@media (max-width: 575.98px) {
  .site-home-header {
    padding: .75rem 0;
  }
  .site-home-header img {
    width: 58px;
  }
  .site-home-header h1 {
    font-size: .9rem !important;
  }
  .hero-inner > .container {
    padding-bottom: max(.75rem, env(safe-area-inset-bottom));
  }
  .hero-actions {
    padding-bottom: .55rem;
  }
}
/* 2026 poster palette v4: match Through Chemistry's Realm poster */ :root {
  --mf-ink: #12152f;
  --mf-ink-2: #22284f;
  --mf-warm: #f7f5ff;
  --mf-card: rgba(255, 255, 255, .88);
  --mf-line: rgba(105, 88, 172, .18);
  --mf-gold: #c79252;
  --mf-amber: #d5a066;
  --mf-rose: #b97bd7;
  --mf-mint: #9bd9ff;
  --mf-blue: #4e83d8;
  --mf-brown: #574173;
  --mf-violet: #6e50a8;
  --mf-violet-2: #9d79cf;
  --mf-indigo: #18265a;
  --mf-sky: #dceeff;
  --mf-shadow: 0 20px 55px rgba(31, 35, 89, .14);
  --mf-shadow-strong: 0 24px 70px rgba(33, 24, 84, .24);
  --mf-radius: 22px;
}
body {
  color: var(--mf-ink-2);
  background:
    radial-gradient(circle at 10% 4%, rgba(220, 238, 255, .88), transparent 28%), radial-gradient(circle at 90% 8%, rgba(185, 123, 215, .26), transparent 25%), radial-gradient(circle at 52% 0%, rgba(110, 80, 168, .16), transparent 35%), linear-gradient(180deg, #fbfbff 0%, #f6f2ff 42%, #eef6ff 100%);
}
a {
  color: #5c4aa6
}
.text-gradient {
  background: linear-gradient(90deg, #23306f, #6e50a8, #4e83d8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}
a:focus-visible, button:focus-visible {
  outline-color: rgba(157, 121, 207, .7)
}
.site-navbar {
  background: rgba(255, 255, 255, .86);
  border-bottom: 1px solid rgba(105, 88, 172, .14);
  box-shadow: 0 12px 34px rgba(31, 35, 89, .08);
}
.navtitle {
  color: #463274
}
.nav-link {
  color: #2c315f !important
}
.nav-link:hover, .nav-link.active {
  background: linear-gradient(135deg, #6e50a8, #4e83d8);
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(110, 80, 168, .22)
}
.navbar-toggler {
  border-color: rgba(105, 88, 172, .24)
}
.site-home-header {
  background: transparent;
  color: #fff
}
.site-home-header h1 {
  text-shadow: 0 4px 18px rgba(18, 21, 47, .55)
}
.site-home-header small {
  color: rgba(255, 255, 255, .82)
}
.home-hero {
  background: #10122e
}
.home-hero::before, .home-hero::after {
  display: none !important;
  content: none !important;
  background: none !important
}
.hero-inner {
  z-index: 3
}
.hero-action-card {
  border-radius: 14px !important;
  color: #c0d4de !important;
  background: rgba(86, 91, 131, .94) !important;
  border: 1px solid rgba(86, 91, 131, .95) !important;
  box-shadow: 0 18px 48px rgba(86, 91, 131, .99) !important;
}
.hero-action-card i {  
  color: #e4e5f0 !important;
}
.hero-action-card:hover {
  color: #15183d !important;
  border-color: rgba(157, 121, 207, .72) !important;
  box-shadow: 0 24px 64px rgba(79, 62, 151, .26) !important;
}
.section-eyebrow {
  color: #513f91;
  background: rgba(238, 231, 255, .82);
  border-color: rgba(110, 80, 168, .18)
}
.section-title {
  color: #171b49
}
.section-desc {
  color: #4c517a
}
.bento-card, .sponsor-group, .section-card, .tab-content, .event-item, .detail-card, .sci-card, .video-card {
  background: rgba(255, 255, 255, .86) !important;
  border-color: rgba(105, 88, 172, .14) !important;
 
}
.bento-card.feature {
  background: linear-gradient(160deg, rgba(255, 255, 255, .94), rgba(238, 231, 255, .78)) !important
}
.bento-card::after {
  background: radial-gradient(circle, rgba(157, 121, 207, .28), transparent 68%)
}
.bento-icon {
  background: linear-gradient(135deg, #eef6ff, #eee7ff);
  color: #6e50a8;
  box-shadow: 0 12px 24px rgba(78, 131, 216, .12)
}
.bento-card h3, .event-title, .video-title, .detail-title, .sci-card .card-title {
  color: #151947
}
.bento-card p, .event-desc, .video-desc, .detail-text, .sci-card .card-text, .tab-pane p {
  color: #454a78
}
.home-sponsors {
  background: rgba(248, 247, 255, .72)
}
.home-sponsors .lead, .sponsor-label {
  color: #323766
}
.hero-banner {
  background: linear-gradient(135deg, rgba(18, 21, 47, .72), rgba(110, 80, 168, .42)), url('../images/banner.jpg') center/cover no-repeat;
}
.hero-banner::before {
  background: radial-gradient(circle at 50% 20%, rgba(220, 238, 255, .35), transparent 30%), linear-gradient(0deg, rgba(18, 21, 47, .58), transparent 72%)
}
.hero-banner::after {
  background: linear-gradient(90deg, transparent, #dceeff, #9d79cf, #4e83d8, transparent)
}
.hero-banner h2 {
  color: #fff;
  text-shadow: 0 16px 42px rgba(18, 21, 47, .55)
}
.nav-tabs .nav-link {
  background: rgba(255, 255, 255, .72) !important;
  color: #383d72 !important;
  border-color: rgba(105, 88, 172, .14) !important
}
.nav-tabs .nav-link.active {
  background: linear-gradient(135deg, #6e50a8, #4e83d8) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(110, 80, 168, .24)
}
.events-section-title {
  color: #1d2354
}
.events-section-title::before {
  background: #9d79cf;
  box-shadow: 0 0 0 6px rgba(157, 121, 207, .16)
}
.event-date, .detail-meta {
  color: #5d638d
}
.event-badge, .detail-badge, .sci-badge, .video-badge {
  background: linear-gradient(135deg, rgba(238, 231, 255, .96), rgba(255, 255, 255, .78));
  color: #5b4493;
  border-color: rgba(110, 80, 168, .18)
}
.event-linkhint, .detail-link a {
  color: #604aad
}
.btn-warm-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #6e50a8;
  --bs-btn-border-color: #6e50a8;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #4e83d8;
  --bs-btn-hover-border-color: #4e83d8;
  box-shadow: 0 12px 28px rgba(110, 80, 168, .22)
}
.tag-btn, .page-content .btn-warm-primary, .page-content .btn-outline-secondary, .page-content .btn-learning, .page-content .filter-btn {
  background: rgba(255, 255, 255, .86) !important;
  color: #594497 !important;
  border-color: rgba(105, 88, 172, .2) !important;
  box-shadow: 0 8px 22px rgba(31, 35, 89, .08)
}
.tag-btn::before, .page-content .btn-warm-primary::before, .page-content .btn-outline-secondary::before, .page-content .btn-learning::before, .page-content .filter-btn::before {
  background: #8a6cc7;
  box-shadow: 0 0 0 4px rgba(138, 108, 199, .14)
}
.tag-btn:hover, .page-content .btn-warm-primary:hover, .page-content .btn-outline-secondary:hover, .page-content .btn-learning:hover, .page-content .filter-btn:hover {
  color: #20265b !important;
  border-color: rgba(110, 80, 168, .38) !important;
  box-shadow: 0 14px 32px rgba(31, 35, 89, .14)
}
.site-footer {
  background: radial-gradient(circle at 18% 0%, #4d3a87 0%, #171b49 48%, #070817 100%)
}
.contact-list li::before {
  color: #dceeff
}
.footer-note {
  color: rgba(255, 255, 255, .76)
}
@media (max-width:991.98px) {
  .home-page .site-home-header {
    background: transparent !important
  }
  .hero-action-card {
    border-radius: 14px !important
  }
  .hero-action-card i {
    border-radius: 12px !important
  }
}

/*=========================
Poster Gallery
==========================*/

.poster-card{
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 12px;
    box-shadow: var(--mf-shadow);
}

.poster-card img{
  display: block;
  width: 100%;
  border-radius: 12px;
  transition: .25s;
}

.poster-card:hover img{
  filter: brightness(1.05);
}

.poster-download{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  z-index: 20;

  display: flex;
  justify-content: center;
  align-items: center;

  color: #fff !important;
  background: var(--mf-brown);
  backdrop-filter: blur(8px);
  border-radius: 10px;
  text-decoration: none;

  opacity: 1;
  transition: .25s;
}

.poster-download:hover{
  background: #fff;
  color: var(--mf-brown) !important;
  transform: translateY(-2px);
}
/* =========================
   TIB Science Missions
========================= */

.tib-mission-intro {
  padding: 1rem .25rem;
}

.tib-mission-intro h3 {
  font-weight: 800;
}

.tib-mission-intro .lead {
  font-weight: 600;
}

.mission-title-link {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  font-weight: 800;
}

.mission-title-link i {
  font-size: .8em;
  transition: transform .2s ease;
}

.mission-title-link:hover,
.mission-title-link:focus {
  color: var(--bs-primary);
}

.mission-title-link:hover i,
.mission-title-link:focus i {
  transform: translateX(4px);
}

.mission-reading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem .7rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, .1);
}

.mission-reading-label {
  font-weight: 700;
}

/* 更多閱讀做成標籤 */
.mission-reading a {
  display: inline-flex;
  align-items: center;
  padding: .38rem .8rem;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  color: inherit;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 600;
  transition:
    background-color .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

.mission-reading a:hover,
.mission-reading a:focus {
  background: #fff;
  border-color: rgba(0, 0, 0, .25);
  transform: translateY(-1px);
}

@media (max-width: 767.98px) {
  .mission-reading {
    align-items: flex-start;
  }

  .mission-reading-label {
    width: 100%;
  }
}
/* =========================
   TIB 更多閱讀
========================= */

.mission-reading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
}

.mission-reading-label {
  font-weight: 700;
}

.mission-reading-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;

  padding: .42rem .85rem;

  border: 1px solid rgba(60, 47, 38, .18);
  border-radius: 999px;

  background: rgba(255,255,255,.6);
  color: inherit;

  font-size: .9rem;
  font-weight: 600;
  line-height: 1.4;

  cursor: pointer;

  transition:
    background-color .2s ease,
    border-color .2s ease;
}

.mission-reading-link:hover,
.mission-reading-link:focus {
  background: #fff;
  border-color: rgba(60,47,38,.35);
}

.mission-reading-link i {
  font-size: .72rem;
  transition: transform .25s ease;
}

/* 展開時箭頭轉向 */
.mission-reading-link[aria-expanded="true"] i {
  transform: rotate(180deg);
}


/* 展開閱讀內容 */

.science-reading-collapse {
  margin-top: 1rem;
}

.science-reading-panel {
  padding: 1.4rem 1.5rem;

  background: rgba(255,255,255,.55);

  border-top: 1px solid rgba(60,47,38,.12);
  border-bottom: 1px solid rgba(60,47,38,.12);
}

.science-reading-header {
  margin-bottom: 1.25rem;
}

.science-reading-type {
  display: block;

  margin-bottom: .25rem;

  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;

  opacity: .6;
}

.science-reading-header h5 {
  margin: 0;
  font-weight: 800;
}

.science-reading-section + .science-reading-section {
  margin-top: 1.5rem;
}

.science-reading-section h6 {
  margin-bottom: .7rem;
  font-weight: 800;
}

.science-reading-section ul {
  margin: 0;
  padding-left: 1.25rem;
}

.science-reading-section li {
  margin-bottom: .55rem;
  line-height: 1.7;
}

.science-reading-section li:last-child {
  margin-bottom: 0;
}

.science-reading-section a {
  color: inherit;
  font-weight: 600;

  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

.science-reading-section a:hover {
  color: var(--bs-primary);
}

.science-reading-section a i {
  margin-left: .3rem;
  font-size: .7em;
}

@media (max-width: 767.98px) {

  .mission-reading {
    align-items: flex-start;
  }

  .mission-reading-label {
    width: 100%;
  }

  .science-reading-panel {
    padding: 1.15rem;
  }

}
/* =========================================================
   Home Header
========================================================= */

.site-home-header {
    padding: 1rem 0;
}


/* 化學會 Logo 連結 */
.site-home-header .hero-brand-link {
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    text-decoration: none;
}


/* 化學會橫向 Logo */
.site-home-header .hero-brand-logo {
    display: block;

    width: auto;
    height: 76px;

    max-width: min(520px, 55vw);

    object-fit: contain;

    transition:
        transform .2s ease,
        opacity .2s ease;
}


.site-home-header .hero-brand-link:hover .hero-brand-logo,
.site-home-header .hero-brand-link:focus .hero-brand-logo {
    transform: translateY(-2px);
    opacity: .92;
}


/* =========================================================
   Tablet
========================================================= */

@media (max-width: 991.98px) {

    .site-home-header .hero-brand-logo {
        height: 64px;
        max-width: 58vw;
    }

}


/* =========================================================
   Mobile
========================================================= */

@media (max-width: 767.98px) {

    /*
     * Header 疊在主視覺上
     * 不再佔一整塊版面高度
     */
    .site-home-header {
        position: absolute;
        top: 0;
        left: 0;

        width: 100%;
        height: 100svh;

        padding: 0;

        z-index: 20;

        pointer-events: none;
    }


    /*
     * container 同樣涵蓋整個手機主視覺
     */
    .site-home-header .container {
        position: relative;

        width: 100%;
        max-width: none;
        height: 100%;

        padding: 0;
        margin: 0;
    }


    /*
     * 化學會 Logo
     *
     * X：畫面正中央
     * Y：畫面中央偏上
     */
    .site-home-header .hero-brand-link {
        position: absolute;

        left: 50%;
        top: 38%;

        transform: translate(-50%, -50%);

        display: block;

        width: min(82vw, 420px);

        margin: 0;
        padding: 0;

        z-index: 30;

        pointer-events: auto;
    }


    .site-home-header .hero-brand-logo {
        display: block;

        width: 100%;
        height: auto;

        max-width: none;

        object-fit: contain;
    }


    /*
     * 避免原本 hover 的 transform
     * 破壞 absolute 置中
     */
    .site-home-header .hero-brand-link:hover,
    .site-home-header .hero-brand-link:focus {
        transform: translate(-50%, -50%);
    }

}
/* =========================
   Social Platform Logos
   - 首頁桌機：位於首頁 Header 右側
   - 首頁手機：位於標題下方
   - 內容頁：位於 Banner 右上方
========================= */

.hero-social-links {
  display: flex;
  align-items: center;
  gap: 1rem;
  z-index: 20;
}

.hero-social-link {
  display: block;
  flex: 0 0 auto;
  line-height: 1;
  text-decoration: none;
  transition: transform .2s ease, opacity .2s ease;
}


.hero-social-link img {
  display: block;
  width: auto;
  height: 32px;
  object-fit: contain;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .25));
}

.hero-social-link:hover,
.hero-social-link:focus {
  transform: translateY(-2px);
  opacity: .85;
}

/* 首頁：social-links.php 放在 .site-home-header .container 內 */
.site-home-header .hero-social-links {
  position: static;
  margin-left: auto;
}

/* 內容頁 Banner */
.hero-banner .hero-social-links {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
}

@media (max-width: 767.98px) {
  .site-home-header .container {
    flex-wrap: wrap;
    justify-content: flex-start !important;
    text-align: left;
  }

  .site-home-header .home-brand {
    width: 100%;
  }

  /* 首頁手機：Logo 列放在 h1 所在品牌列的下一行，並留距離 */
  .site-home-header .hero-social-links {
    width: 100%;
    margin: .75rem 0 0 0;
    padding-left: calc(40px + .55rem);
    justify-content: flex-start;
    gap: .7rem;
  }

  .site-home-header .hero-social-link img,
  .hero-banner .hero-social-link img {
    height: 25px;
  }

  .hero-banner .hero-social-links {
    top: .75rem;
    right: .85rem;
    gap: .7rem;
  }
}

/* =========================
   TIB Mission Link
========================= */

.science-mission-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.science-mission-link:hover,
.science-mission-link:focus {
  color: inherit;
  text-decoration: none;
}

.science-mission-link .sci-card {
  cursor: pointer;
}

.science-mission-link .mission-arrow {
  margin-left: .5rem;
  font-size: .8em;
  transition: transform .2s ease;
}

.science-mission-link:hover .mission-arrow {
  transform: translateX(6px);
}


/* Coming Soon */

.coming-soon {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.coming-soon-icon {
  font-size: 2.5rem;
  opacity: .65;
}

.coming-soon h3 {
  font-weight: 800;
}
/* =========================================================
   TIB Mission
========================================================= */

.tib-mission-list {
    display: grid;
    gap: 1rem;
}

.tib-mission-item {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 88px;

    padding: 1.35rem 4rem 1.35rem 1.5rem;

    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 12px;

    color: inherit;
    text-decoration: none;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.tib-mission-item h4 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
}

.tib-mission-item > i {
    position: absolute;

    top: 50%;
    right: 1.5rem;

    transform: translateY(-50%);

    font-size: .95rem;

    transition: transform .2s ease;
}

.tib-mission-item:hover,
.tib-mission-item:focus {
    color: inherit;
    text-decoration: none;

    transform: translateY(-2px);

    box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
}

.tib-mission-item:hover > i {
    transform: translate(5px, -50%);
}

/* =========================
   TIB Mission Title Link
========================= */

.tib-mission-title-link {
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
    transition: color .2s ease;
}

.tib-mission-title-link i {
    font-size: .82em;
    transition: transform .2s ease;
}

.tib-mission-title-link:hover {
    color: var(--bs-primary);
}

.tib-mission-title-link:hover i {
    transform: translateX(5px);
}
/* Mobile */

@media (max-width: 767.98px) {

    .tib-mission-item {
        min-height: 72px;
        padding: 1.1rem 3.25rem 1.1rem 1.15rem;
    }

    .tib-mission-item h4 {
        font-size: 1.05rem;
    }

    .tib-mission-item > i {
        right: 1.15rem;
    }

}
/* =========================================================
   Movie Character
========================================================= */

.movie-character-card {
    padding: 1.5rem 1.6rem;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 14px;
    background: rgba(255, 255, 255, .55);
}

.character-content {
    width: 100%;
}

.character-content h3 {
    margin: 0 0 1rem;
    font-weight: 700;
}

.character-content p {
    line-height: 1.9;
}

.character-actor {
    margin-left: .25rem;
    font-size: .7em;
    font-weight: 400;
    color: #6c6f87;
}


/* 演員表 */

.character-cast {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, .08);
}

.character-cast h4 {
    margin: 0 0 .8rem;
    font-size: 1rem;
    font-weight: 700;
}

.character-cast ul {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.5rem;

    margin: 0;
    padding: 0;

    list-style: none;
}

.character-cast li {
    display: flex;
    align-items: baseline;
    gap: .45rem;
}

.character-cast li span {
    color: #6c6f87;
}


/* Mobile */

@media (max-width: 767.98px) {

    .movie-character-card {
        padding: 1.15rem;
    }

    .character-cast ul {
        display: grid;
        grid-template-columns: 1fr;
        gap: .45rem;
    }

}

/* =========================================================
   Home Content Highlights
   左：預告片 + 海報（較大）
   右：網站內容（較小）
========================================================= */

.home-highlight-grid {
    display: grid;

    /* 左 media 較大、右 main 較小 */
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);

    gap: 1.5rem;
    align-items: stretch;
}


/* =========================================================
   左欄：Media
========================================================= */

.home-highlight-media {
    grid-column: 1;

    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}


/* =========================================================
   右欄：Main
========================================================= */

.home-highlight-main {
    grid-column: 2;

    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.home-highlight-main .bento-card {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.home-highlight-main .bento-card p {
    flex: 1;
}

.home-highlight-main .bento-card .btn {
    align-self: flex-start;
}


/* =========================================================
   Media 區塊
========================================================= */

.home-trailer-section,
.home-poster-section {
    padding: 1.25rem;

    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(105, 88, 172, .14);
    border-radius: var(--mf-radius);

    box-shadow: var(--mf-shadow);
}

/* =========================================================
   區塊標題
========================================================= */

.home-media-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 1rem;
}

.home-media-heading h3 {
    display: flex;
    align-items: center;
    gap: .55rem;

    margin: 0;

    color: #151947;
    font-size: 1.1rem;
    font-weight: 700;
}

.home-media-heading h3 i {
    color: var(--mf-violet);
}


/* =========================================================
   Trailer
========================================================= */

.home-trailer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}


/* 整張卡片就是連結 */

.home-trailer-card {
    display: block;

    overflow: hidden;

    color: inherit;
    text-decoration: none;

    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(105, 88, 172, .14);
    border-radius: 12px;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.home-trailer-card:hover,
.home-trailer-card:focus {
    color: inherit;
    text-decoration: none;

    transform: translateY(-3px);

    border-color: rgba(110, 80, 168, .32);

    box-shadow:
        0 16px 34px rgba(31, 35, 89, .13);
}


/* 預告截圖 */

.home-trailer-image {
    position: relative;
    overflow: hidden;

    aspect-ratio: 16 / 9;

    background: #11152f;
}

.home-trailer-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .3s ease;
}

.home-trailer-card:hover .home-trailer-image img {
    transform: scale(1.025);
}


/* 播放符號 */

.home-trailer-play {
    position: absolute;

    top: 50%;
    left: 50%;

    display: grid;
    place-items: center;

    width: 54px;
    height: 54px;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    color: #fff;

    background: rgba(18, 21, 47, .78);

    box-shadow:
        0 8px 28px rgba(0, 0, 0, .28);

    transition:
        transform .2s ease,
        background-color .2s ease;
}

.home-trailer-card:hover .home-trailer-play {
    transform:
        translate(-50%, -50%)
        scale(1.08);

    background: rgba(110, 80, 168, .92);
}


/* 預告文字 */

.home-trailer-info {
    padding: .85rem .9rem .9rem;
}

.home-trailer-info h4 {
    margin: 0 0 .3rem;

    color: #151947;

    font-size: .96rem;
    font-weight: 700;
}

.home-trailer-info span {
    color: #62678e;

    font-size: .78rem;
    font-weight: 600;
}

.home-trailer-info span i {
    margin-left: .25rem;
    font-size: .8em;
}


/* =========================================================
   Poster
========================================================= */

.home-poster-single {
    position: relative;

    width: 100%;
}


/*
 * 海報不要像以前兩張並排縮得很小。
 * 單張海報可以直接放大顯示。
 */

.home-poster-single .poster-card {
    display: block;

    width: 100%;

    overflow: hidden;

    border-radius: 12px;

    background: #fff;
}

.home-poster-single .poster-image {
    display: block;

    width: 100%;
    height: auto;

    border-radius: 12px;
}


/* 下載維持右上角 */

.home-poster-single .poster-download {
    top: 12px;
    right: 12px;
}


/* =========================================================
   Tablet
========================================================= */

@media (max-width: 991.98px) {

    .home-highlight-grid {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   Mobile
========================================================= */

@media (max-width: 767.98px) {

    .home-highlight-grid {
        gap: 1rem;
    }

    .home-trailer-section,
    .home-poster-section {
        padding: 1rem;
    }

    /*
     * 手機預告片上下排列
     */
    .home-trailer-grid {
        grid-template-columns: 1fr;
    }

    .home-trailer-play {
        width: 48px;
        height: 48px;
    }

}
/* =========================================================
   Tablet / Mobile
========================================================= */

@media (max-width: 991.98px) {

    .home-highlight-grid {
        grid-template-columns: 1fr;
    }

    .home-highlight-media,
    .home-highlight-main {
        grid-column: 1;
    }

}
/* =========================================================
   Home Poster
========================================================= */

.home-poster-single {
    width: 100%;
}

.home-poster-desc {
    margin: 0 0 1rem;
    color: #454a78;
    line-height: 1.8;
}


/* 海報圖片與下載按鈕的定位容器 */

.home-poster-image-wrap {
    position: relative;
    width: 100%;
}


/* 海報 */

.home-poster-image-wrap .poster-card {
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
}

.home-poster-image-wrap .poster-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}


/* 下載按鈕 */

.home-poster-image-wrap .poster-download {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    color: #fff !important;
    background: rgba(24, 38, 90, .86);

    border-radius: 10px;
    text-decoration: none;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    transition:
        background-color .2s ease,
        color .2s ease,
        transform .2s ease;
}

.home-poster-image-wrap .poster-download:hover,
.home-poster-image-wrap .poster-download:focus {
    color: #18265a !important;
    background: #fff;
    transform: translateY(-2px);
}


/* Mobile */

@media (max-width: 767.98px) {

    .home-poster-desc {
        margin-bottom: .85rem;
        font-size: .94rem;
    }

    .home-poster-image-wrap .poster-download {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
    }

}
/* =========================================================
   Watch Movie Page
========================================================= */

.watch-page {
    width: 100%;
}


/* ---------------------------------------------------------
   Section heading
--------------------------------------------------------- */

.watch-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;

    margin-bottom: 1rem;
}

.watch-section-heading h3 {
    margin: .15rem 0 0;

    color: #171b4b;
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    font-weight: 700;
}

.watch-eyebrow {
    display: block;

    color: #7657a8;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
}

.watch-type {
    flex: 0 0 auto;

    padding: .35rem .75rem;

    color: #665384;
    background: rgba(112, 82, 164, .08);

    border: 1px solid rgba(112, 82, 164, .15);
    border-radius: 999px;

    font-size: .78rem;
    font-weight: 600;
}


/* =========================================================
   Main Movie
========================================================= */

.watch-main {
    margin-bottom: 3.5rem;
}

.watch-main-card {
    display: block;

    overflow: hidden;

    color: inherit;
    text-decoration: none;

    border-radius: 16px;

    background: #10142d;

    box-shadow:
        0 20px 48px rgba(22, 26, 72, .16);
}

.watch-main-image {
    position: relative;

    width: 100%;
    aspect-ratio: 16 / 9;

    overflow: hidden;
}

.watch-main-image > img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .4s ease;
}

.watch-main-card:hover .watch-main-image > img {
    transform: scale(1.015);
}


/* 正片左下角文字 */

.watch-main-overlay {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    padding:
        3rem
        1.5rem
        1.35rem;

    color: #fff;

    background:
        linear-gradient(
            to top,
            rgba(8, 11, 32, .88),
            rgba(8, 11, 32, 0)
        );
}

.watch-main-overlay span {
    display: block;

    margin-bottom: .2rem;

    font-size: .78rem;
    opacity: .8;
}

.watch-main-overlay strong {
    display: block;

    font-size: clamp(1.15rem, 2vw, 1.5rem);
    font-weight: 700;
}


/* 正片下方介紹 */

.watch-main-description {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;

    padding: 1.25rem .25rem 0;
}

.watch-main-description p {
    max-width: 760px;

    margin: 0;

    color: #555a77;
    line-height: 1.85;
}


/* =========================================================
   Play
========================================================= */

.watch-play {
    position: absolute;

    top: 50%;
    left: 50%;

    z-index: 5;

    display: grid;
    place-items: center;

    width: 52px;
    height: 52px;

    transform: translate(-50%, -50%);

    color: #fff;

    background: rgba(20, 24, 62, .78);

    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .28);

    transition:
        transform .2s ease,
        background-color .2s ease;
}

.watch-play-lg {
    width: 72px;
    height: 72px;

    font-size: 1.25rem;
}

.watch-main-card:hover .watch-play,
.watch-video-link:hover .watch-play {
    transform:
        translate(-50%, -50%)
        scale(1.08);

    background: rgba(111, 78, 169, .94);
}


/* =========================================================
   Science Videos
========================================================= */

.watch-science {
    padding-top: 2rem;

    border-top: 1px solid rgba(39, 43, 92, .1);
}

.watch-section-intro {
    max-width: 720px;

    margin: -.25rem 0 1.5rem;

    color: #626681;
    line-height: 1.8;
}


/* 桌機並排 */

.watch-video-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}


/* Video card */

.watch-video-card {
    min-width: 0;
}

.watch-video-link {
    display: block;

    height: 100%;

    overflow: hidden;

    color: inherit;
    text-decoration: none;

    background: #fff;

    border: 1px solid rgba(55, 59, 107, .1);
    border-radius: 12px;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.watch-video-link:hover,
.watch-video-link:focus {
    color: inherit;
    text-decoration: none;

    transform: translateY(-3px);

    border-color: rgba(108, 78, 165, .25);

    box-shadow:
        0 14px 32px rgba(25, 29, 78, .1);
}


/* Thumbnail */

.watch-video-image {
    position: relative;

    overflow: hidden;

    aspect-ratio: 16 / 9;

    background: #10142d;
}

.watch-video-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .3s ease;
}

.watch-video-link:hover .watch-video-image img {
    transform: scale(1.025);
}


/* Content */

.watch-video-content {
    position: relative;

    padding: .9rem 1rem 1rem;
}

.watch-video-number {
    display: block;

    margin-bottom: .2rem;

    color: #8a70b0;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
}

.watch-video-content h4 {
    margin: 0 0 .65rem;

    color: #171b4b;
    font-size: 1rem;
    font-weight: 700;
}

.watch-video-action {
    color: #686c87;

    font-size: .78rem;
    font-weight: 600;
}

.watch-video-action i {
    margin-left: .2rem;
    font-size: .8em;
}



/* =========================================================
   Mobile
========================================================= */

@media (max-width: 767.98px) {

    .watch-main {
        margin-bottom: 2.5rem;
    }

    .watch-main-card {
        border-radius: 12px;
    }

    .watch-play-lg {
        width: 58px;
        height: 58px;
        font-size: 1rem;
    }

    .watch-main-overlay {
        padding: 2.5rem 1rem .9rem;
    }

    .watch-main-description {
        display: block;
        padding-top: 1rem;
    }

    .watch-main-description .btn {
        margin-top: 1rem;
    }

    .watch-science {
        padding-top: 1.5rem;
    }

    /* 手機一列 1 個 */
    .watch-video-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .watch-type {
        display: none;
    }

}


/* =========================================================
   Small Mobile
========================================================= */

@media (max-width: 575.98px) {

    .watch-video-grid {
        grid-template-columns: 1fr;
    }

    .watch-type {
        display: none;
    }

}

/* =========================================================
   Podcast Page
========================================================= */

.podcast-page {
    width: 100%;
}


/* =========================================================
   Common Heading
========================================================= */

.podcast-eyebrow {
    display: block;

    margin-bottom: .2rem;

    color: #7657a8;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
}

.podcast-section-heading {
    margin-bottom: 1.25rem;
}

.podcast-section-heading h3,
.podcast-intro-content h3 {
    margin: 0;

    color: #171b4b;
    font-weight: 700;
}

.podcast-section-heading h3 {
    font-size: clamp(1.35rem, 2vw, 1.75rem);
}


/* =========================================================
   Intro
========================================================= */

.podcast-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr);
    gap: 2.5rem;
    align-items: center;
}

.podcast-intro-content h3 {
    margin-bottom: 1rem;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
}

.podcast-lead {
    color: #262b61;
    font-size: 1.08rem;
    font-weight: 600;
}

.podcast-intro-content p {
    line-height: 1.9;
}


/* Cover */

.podcast-cover {
    width: 100%;
}

.podcast-cover img,
.podcast-cover-placeholder {
    display: block;

    width: 100%;
    aspect-ratio: 1 / 1;

    border-radius: 18px;

    box-shadow:
        0 18px 42px rgba(26, 30, 78, .15);
}

.podcast-cover img {
    object-fit: cover;
}

.podcast-cover-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: .8rem;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #25295f,
            #7559a7
        );
}

.podcast-cover-placeholder i {
    font-size: 3rem;
}

.podcast-cover-placeholder span {
    font-size: .9rem;
    font-weight: 600;
}


/* =========================================================
   Platforms
========================================================= */

.podcast-platforms {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: .6rem;

    margin-top: 1.5rem;
}

.podcast-platform-label {
    margin-right: .3rem;

    color: #565b79;
    font-size: .85rem;
    font-weight: 600;
}

.podcast-platform-link {
    display: inline-flex;
    align-items: center;

    gap: .4rem;

    padding: .45rem .8rem;

    color: #3e4168;
    text-decoration: none;

    background: #fff;

    border: 1px solid rgba(65, 68, 112, .14);
    border-radius: 999px;

    font-size: .82rem;
    font-weight: 600;
}

.podcast-platform-link:hover {
    color: #6f4ea9;
    border-color: rgba(111, 78, 169, .35);
}


/* =========================================================
   Featured Episode
========================================================= */

.podcast-featured-card {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);

    overflow: hidden;

    background: rgba(255, 255, 255, .75);

    border: 1px solid rgba(73, 77, 125, .1);
    border-radius: 16px;

    box-shadow:
        0 15px 36px rgba(25, 29, 76, .08);
}

.podcast-featured-number {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 220px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #20265d,
            #7656a6
        );

    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .08em;
}

.podcast-featured-content {
    padding: 1.5rem;
}

.podcast-featured-content h4 {
    margin: .65rem 0 .75rem;

    color: #171b4b;
    font-size: 1.3rem;
    font-weight: 700;
}

.podcast-featured-content p {
    margin-bottom: 1.25rem;

    color: #595e7b;
    line-height: 1.8;
}


/* Meta */

.podcast-meta,
.podcast-episode-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;

    color: #8589a0;
    font-size: .78rem;
}

.podcast-meta i {
    margin-right: .25rem;
}


/* =========================================================
   Episode Grid
========================================================= */

.podcast-episode-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.podcast-episode-card {
    display: flex;
    flex-direction: column;

    min-width: 0;

    padding: 1.25rem;

    background: rgba(255, 255, 255, .72);

    border: 1px solid rgba(67, 71, 120, .1);
    border-radius: 14px;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.podcast-episode-card:hover {
    transform: translateY(-3px);

    border-color: rgba(111, 78, 169, .24);

    box-shadow:
        0 14px 30px rgba(27, 30, 76, .08);
}

.podcast-episode-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    margin-bottom: .8rem;
}

.podcast-episode-no {
    color: #785da7;

    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
}

.podcast-episode-category {
    padding: .25rem .55rem;

    color: #696d89;
    background: rgba(101, 83, 145, .07);

    border-radius: 999px;

    font-size: .7rem;
    font-weight: 600;
}

.podcast-episode-card h4 {
    margin: 0 0 .7rem;

    color: #171b4b;
    font-size: 1.05rem;
    font-weight: 700;
}

.podcast-episode-card p {
    flex: 1;

    color: #5f637f;
    line-height: 1.75;
}

.podcast-episode-meta {
    margin-top: .25rem;
}

.podcast-episode-link {
    display: inline-flex;
    align-items: center;

    gap: .4rem;

    margin-top: 1rem;

    color: #6f4ea9;
    text-decoration: none;

    font-size: .85rem;
    font-weight: 700;
}

.podcast-episode-link:hover {
    color: #4d357d;
}


/* =========================================================
   Topics
========================================================= */

.podcast-topic-list {
    display: flex;
    flex-wrap: wrap;

    gap: .65rem;
}

.podcast-topic {
    display: inline-flex;
    align-items: center;

    padding: .45rem .85rem;

    color: #555a79;

    background: rgba(255, 255, 255, .72);

    border: 1px solid rgba(67, 71, 120, .11);
    border-radius: 999px;

    font-size: .82rem;
    font-weight: 600;
}


/* =========================================================
   About
========================================================= */

.podcast-about {
    padding-top: 2rem;

    border-top: 1px solid rgba(39, 43, 92, .1);
}

.podcast-about-content {
    max-width: 880px;
}

.podcast-about-content p {
    line-height: 1.9;
}


/* =========================================================
   Tablet
========================================================= */

@media (max-width: 991.98px) {

    .podcast-intro-grid {
        grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
        gap: 1.5rem;
    }

}


/* =========================================================
   Mobile
========================================================= */

@media (max-width: 767.98px) {

    .podcast-intro-grid {
        grid-template-columns: 1fr;
    }

    .podcast-cover {
        max-width: 320px;
        margin: 0 auto;
    }

    .podcast-featured-card {
        grid-template-columns: 1fr;
    }

    .podcast-featured-number {
        min-height: 80px;
        justify-content: flex-start;

        padding: 0 1.25rem;
    }

    .podcast-episode-grid {
        grid-template-columns: 1fr;
    }

}
.site-logo-link {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0;
    text-decoration: none;
}

.site-logo-horizontal {
    display: block;
    width: auto;
    height: 48px;
    max-width: 100%;
    object-fit: contain;
}

@media (max-width: 767.98px) {
    .site-logo-horizontal {
        height: 38px;
    }
}
.footer-logo-link {
    display: inline-block;
    text-decoration: none;
}

.footer-logo-horizontal {
    display: block;
    width: auto;
    height: 52px;
    max-width: 100%;
    object-fit: contain;
}

@media (max-width: 767.98px) {
    .footer-logo-horizontal {
        height: 42px;
    }
}
.hero-brand {
    display: inline-block;
    text-decoration: none;
}

.hero-brand-logo {
    display: block;
    width: auto;
    height: 50px;
    max-width: min(400px, 80vw);
    object-fit: contain;
}

@media (max-width: 767.98px) {

    .hero-brand-logo {
        height: 48px;
        max-width: 75vw;
    }

}