:root {
  --praise-sticker-sheet: url("https://mysite.tw/image.aspx?id=img_3b7bdad0c3404fbd");
}

.home-principles::after,
.home-moments::before,
.home-moments::after,
.about-page__hero::after,
.about-page__topics::before,
.about-page__story::after,
.about-page__detail--education::after,
.about-page__memories::before,
.education-intro::after,
.education-practice--sage::before,
.education-practice--blue::after,
.education-practice--blush::before,
.education-moments::after,
.campus-intro::after,
.campus-activity--art::after,
.campus-activity--physical::before,
.campus-activity--outdoor::after,
.campus-activity--festival::before,
.campus-activity--graduation::after,
.contact-feature::before,
.contact-feature::after,
.site-footer::before {
  display: block;
  z-index: 0;
  width: clamp(118px, 14vw, 188px);
  height: auto;
  aspect-ratio: 1.094 / 1;
  border-radius: 0;
  background-color: transparent;
  background-image: var(--praise-sticker-sheet);
  background-repeat: no-repeat;
  background-size: 200% 200%;
  clip-path: none;
  opacity: .96;
  pointer-events: none;
}

.home-principles::after,
.about-page__topics::before,
.education-practice--blue::after,
.campus-activity--outdoor::after,
.contact-feature::before {
  background-position: 0 100%;
}

.home-moments::before,
.about-page__hero::after,
.education-practice--sage::before,
.education-moments::after,
 .campus-activity--physical::before {
  background-position: 100% 0;
}

.home-moments::after,
.about-page__detail--education::after,
.education-practice--blush::before,
.campus-activity--art::after,
.campus-activity--graduation::after,
.site-footer::before {
  background-position: 100% 100%;
}

.about-page__story::after,
.about-page__memories::before,
.education-intro::after,
.campus-intro::after,
.campus-activity--festival::before,
.contact-feature::after {
  background-position: 0 0;
}

.home-principles::after,
.about-page__topics::before,
.education-practice--blue::after,
.campus-activity--outdoor::after,
.contact-feature::before {
  right: clamp(18px, 4vw, 56px);
  bottom: 18px;
  transform: rotate(-4deg);
}

.home-moments::before,
.about-page__hero::after,
.education-practice--sage::before,
.education-moments::after,
.campus-activity--physical::before {
  top: 20px;
  right: clamp(18px, 4vw, 56px);
  bottom: auto;
  transform: rotate(3deg);
}

.home-moments::after,
.about-page__detail--education::after,
.education-practice--blush::before,
.campus-activity--graduation::after,
.site-footer::before {
  right: clamp(18px, 4vw, 56px);
  bottom: 14px;
  transform: rotate(4deg);
}

.about-page__story::after,
.about-page__memories::before,
.education-intro::after,
.campus-intro::after,
.campus-activity--art::after,
.campus-activity--festival::before,
.contact-feature::after {
  top: 16px;
  right: clamp(18px, 4vw, 56px);
  bottom: auto;
  transform: rotate(-3deg);
}

.campus-activity--art::after,
.campus-activity--physical::before,
.campus-activity--outdoor::after,
.campus-activity--festival::before,
.campus-activity--graduation::after {
  top: 68px;
  right: clamp(108px, 10vw, 142px);
  bottom: auto;
  width: 92px;
  transform: rotate(-3deg);
}

.home-principles > .site-container,
.home-moments > .site-container,
.campus-intro > .site-container,
.campus-activity > .site-container,
.contact-feature > .site-container,
.about-page__hero > .site-container,
.about-page__topics > .site-container,
.about-page__story > .site-container,
.about-page__detail > .site-container,
.about-page__memories > .site-container,
.education-intro > .site-container,
.education-practice > .site-container,
.education-moments > .site-container {
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .home-principles::after,
  .home-moments::before,
  .home-moments::after,
  .about-page__hero::after,
  .about-page__topics::before,
  .about-page__story::after,
  .about-page__detail--education::after,
  .about-page__memories::before,
  .education-intro::after,
  .education-practice--sage::before,
  .education-practice--blue::after,
  .education-practice--blush::before,
  .education-moments::after,
  .campus-intro::after,
  .campus-activity--art::after,
  .campus-activity--physical::before,
  .campus-activity--outdoor::after,
  .campus-activity--festival::before,
  .campus-activity--graduation::after,
  .contact-feature::before,
  .contact-feature::after,
  .site-footer::before {
    width: 104px;
    opacity: .88;
  }

  .home-principles::after,
  .home-moments::after,
  .about-page__detail--education::after,
  .education-practice--blue::after,
  .campus-activity--outdoor::after,
  .campus-activity--graduation::after,
  .contact-feature::before {
    right: 10px;
    bottom: 8px;
  }

  .home-moments::before,
  .about-page__hero::after,
  .education-practice--sage::before,
  .education-moments::after,
  .campus-activity--physical::before {
    top: 8px;
    right: 10px;
  }

  .about-page__story::after,
  .about-page__memories::before,
  .education-intro::after,
  .campus-intro::after,
  .campus-activity--art::after,
  .campus-activity--festival::before,
  .contact-feature::after {
    top: 8px;
    right: 10px;
  }

  .about-page__topics::before,
  .education-practice--blush::before,
  .home-principles::after,
  .site-footer::before {
    display: none;
  }

  .campus-activity--art::after,
  .campus-activity--physical::before,
  .campus-activity--outdoor::after,
  .campus-activity--festival::before,
  .campus-activity--graduation::after {
    top: 10px;
    right: 108px;
    bottom: auto;
    width: 64px;
    opacity: .82;
  }
}

.praise-extra-sticker {
  position: absolute;
  z-index: 0;
  display: block;
  width: clamp(72px, 8vw, 108px);
  height: auto;
  object-fit: contain;
  opacity: .94;
  pointer-events: none;
}

.praise-extra-sticker--top-left { top: 18px; left: clamp(18px, 4vw, 56px); }
.praise-extra-sticker--top-right { top: 18px; right: clamp(18px, 4vw, 56px); }
.praise-extra-sticker--bottom-left { bottom: 16px; left: clamp(18px, 4vw, 56px); }
.praise-extra-sticker--bottom-right { bottom: 16px; right: clamp(18px, 4vw, 56px); }
.praise-extra-sticker--intro-rainbow { right: 26%; bottom: 118px; width: 88px; }
.praise-extra-sticker--outdoor-pony { top: 16px; right: clamp(150px, 16vw, 210px); width: 88px; }

@media (max-width: 768px) {
  .praise-extra-sticker { width: 66px; opacity: .9; }
  .praise-extra-sticker--top-left { top: 10px; left: 12px; }
  .praise-extra-sticker--top-right { top: 10px; right: 12px; }
  .praise-extra-sticker--bottom-left { bottom: 10px; left: 12px; }
  .praise-extra-sticker--bottom-right { bottom: 10px; right: 12px; }
  .praise-extra-sticker--intro-rainbow { right: 24%; bottom: 122px; width: 76px; }
  .praise-extra-sticker--outdoor-pony { top: 10px; right: 124px; width: 66px; }
}

.contact-panel {
  background: rgba(255, 253, 248, .7);
}

.site-header .nav-links a {
  position: relative;
  z-index: 0;
  isolation: isolate;
  border-radius: 999px;
  outline: 1px solid transparent;
  transition: color .18s ease, transform .18s ease;
}

.site-header .nav-links a::before {
  position: absolute;
  z-index: -1;
  inset: 5px -9px;
  border: 1px solid rgba(114, 151, 101, .18);
  border-radius: 999px;
  background: #edf5e8;
  box-shadow: 0 3px 0 rgba(172, 198, 151, .34);
  content: "";
  opacity: 0;
  transform: scale(.94);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}

.site-header .nav-links a::after {
  position: absolute;
  top: 0;
  right: -5px;
  width: 17px;
  height: 17px;
  background:
    radial-gradient(ellipse 2px 3px at 50% 16%, #f3c252 96%, transparent 100%),
    radial-gradient(ellipse 2px 3px at 82% 36%, #f3c252 96%, transparent 100%),
    radial-gradient(ellipse 2px 3px at 82% 68%, #f3c252 96%, transparent 100%),
    radial-gradient(ellipse 2px 3px at 50% 86%, #f3c252 96%, transparent 100%),
    radial-gradient(ellipse 2px 3px at 18% 68%, #f3c252 96%, transparent 100%),
    radial-gradient(ellipse 2px 3px at 18% 36%, #f3c252 96%, transparent 100%),
    radial-gradient(circle at 50% 51%, #ef8292 0 1.6px, transparent 2px),
    radial-gradient(ellipse 3px 1.5px at 8% 88%, #8bad78 96%, transparent 100%),
    radial-gradient(ellipse 3px 1.5px at 92% 88%, #8bad78 96%, transparent 100%);
  content: "";
  opacity: 0;
  transform: translateY(3px) scale(.72) rotate(-12deg);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}

.site-header .nav-links a:hover,
.site-header .nav-links a:focus-visible {
  color: #315f4b;
  transform: translateY(-1px);
}

.site-header .nav-links a:hover::before,
.site-header .nav-links a:focus-visible::before,
.site-header .nav-links a:hover::after,
.site-header .nav-links a:focus-visible::after {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0);
}

.site-header .nav-links a:focus-visible {
  outline: 2px solid rgba(49, 95, 75, .4);
  outline-offset: 5px;
}

.site-header .nav { position: relative; }
.site-header .brand { z-index: 2; }

.header-story-scene {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: calc(50% - 359px);
  width: 300px;
  height: 96px;
  isolation: isolate;
  pointer-events: none;
  transform: translateY(-50%);
}

.header-story-scene::before {
  position: absolute;
  z-index: 0;
  right: 12px;
  bottom: 9px;
  left: 12px;
  height: 30px;
  border-radius: 54% 46% 18% 22% / 82% 72% 28% 30%;
  background: linear-gradient(180deg, rgba(202, 225, 172, .72), rgba(224, 238, 201, .4));
  content: "";
  transform: rotate(-1deg);
}

.header-story-scene__trail {
  position: absolute;
  z-index: 1;
  right: 20px;
  bottom: 12px;
  left: 22px;
  height: 12px;
  border-bottom: 2px dotted rgba(112, 151, 95, .75);
  border-radius: 50%;
  transform: rotate(-3deg);
}

.header-story-scene img {
  position: absolute;
  z-index: 2;
  display: block;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 1px rgba(84, 67, 42, .1));
}

.header-story-scene__rainbow {
  top: -7px;
  left: 2px;
  width: 124px;
  transform: rotate(-5deg);
}

.header-story-scene__pony {
  z-index: 3 !important;
  bottom: 7px;
  left: 91px;
  width: 94px;
  transform: rotate(-2deg);
}

.header-story-scene__sun {
  top: -2px;
  right: 1px;
  width: 64px;
  transform: rotate(7deg);
}

.header-story-scene__sparkle,
.header-story-scene__flower {
  position: absolute;
  z-index: 3;
  line-height: 1;
}

.header-story-scene__sparkle {
  top: 4px;
  left: 192px;
  color: #f1bd43;
  font-size: 20px;
  transform: rotate(12deg);
}

.header-story-scene__flower {
  right: 24px;
  bottom: 13px;
  color: #ef8292;
  font-size: 16px;
  text-shadow: 1px 1px #f1bd43;
}

@media (min-width: 851px) and (max-width: 1249px) {
  .header-story-scene {
    left: clamp(156px, calc(50% - 360px), 264px);
    width: 150px;
    height: 76px;
  }

  .header-story-scene::before { right: 5px; bottom: 7px; left: 5px; height: 22px; }
  .header-story-scene__trail { right: 10px; bottom: 9px; left: 11px; height: 9px; }
  .header-story-scene__rainbow { top: 0; left: 0; width: 78px; }
  .header-story-scene__pony { bottom: 5px; left: 56px; width: 60px; }
  .header-story-scene__sun { top: 0; right: 0; width: 42px; }
  .header-story-scene__sparkle { top: 4px; left: 97px; font-size: 14px; }
  .header-story-scene__flower { right: 11px; bottom: 9px; font-size: 12px; }
}

@media (min-width: 769px) and (max-width: 850px) {
  .header-story-scene { display: none; }
}

@media (max-width: 768px) {
  .header-story-scene {
    left: calc(50% + 32px);
    width: 112px;
    height: 64px;
    transform: translate(-50%, -50%);
  }

  .header-story-scene::before { right: 3px; bottom: 4px; left: 3px; height: 19px; }
  .header-story-scene__trail { right: 8px; bottom: 6px; left: 7px; height: 7px; }
  .header-story-scene__rainbow { top: 1px; left: 0; width: 55px; }
  .header-story-scene__pony { bottom: 4px; left: 34px; width: 49px; }
  .header-story-scene__sun { top: 0; right: 0; width: 30px; }
  .header-story-scene__sparkle { top: 7px; left: 69px; font-size: 11px; }
  .header-story-scene__flower { right: 9px; bottom: 7px; font-size: 10px; }
}

@media (max-width: 360px) {
  .header-story-scene { width: 98px; height: 58px; }
  .header-story-scene__rainbow { width: 47px; }
  .header-story-scene__pony { left: 28px; width: 43px; }
  .header-story-scene__sun { width: 26px; }
  .header-story-scene__sparkle { left: 62px; }
  .header-story-scene__flower { right: 6px; font-size: 9px; }
}

.praise-section-divider {
  position: relative;
  z-index: 2;
  height: 26px;
  margin-block: -13px;
  background:
    repeating-linear-gradient(90deg, rgba(122, 157, 106, .46) 0 6px, transparent 6px 13px)
      left 8% center / calc(42% - 18px) 2px no-repeat,
    repeating-linear-gradient(90deg, rgba(122, 157, 106, .46) 0 6px, transparent 6px 13px)
      right 8% center / calc(42% - 18px) 2px no-repeat;
  pointer-events: none;
}

.praise-section-divider::after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: #e7a92f;
  content: "✿";
  font-size: 18px;
  line-height: 1;
  text-shadow: 1px 1px 0 #ef8292, -1px 1px 0 #8bad78;
  transform: translate(-50%, -50%);
}

@media (max-width: 768px) {
  .site-header .nav-links a::before,
  .site-header .nav-links a::after {
    display: none;
  }

  .site-header .nav-links a:hover,
  .site-header .nav-links a:focus-visible {
    transform: none;
  }

  .praise-section-divider {
    height: 20px;
    margin-block: -10px;
    background-size: calc(42% - 14px) 2px, calc(42% - 14px) 2px;
  }

  .praise-section-divider::after {
    width: 20px;
    height: 20px;
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .nav-links a,
  .site-header .nav-links a::before,
  .site-header .nav-links a::after {
    transition: none;
  }
}

:root {
  --campus-activity-stickers: url("https://mysite.tw/image.aspx?id=img_66d7c83801c546f8");
}

.home-hero {
  min-height: 780px;
}

.hero-content {
  grid-template-columns: minmax(0, 1fr);
}

.hero-intro {
  max-width: 840px;
}

.home-page .hero-intro h1 > span {
  font-family: "華康粗圓體", "華康圓體W7", "DFYuan-W7", "PingFang TC", sans-serif;
}

.hero-intro .site-p {
  margin-bottom: 18px;
}

.hero-values {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 30px);
  margin: 0 0 26px;
}

.hero-value {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.3;
  text-shadow: 0 2px 12px rgba(17, 20, 18, .5);
  white-space: nowrap;
}

.hero-value__icon {
  color: #fff;
  font-size: 25px;
  line-height: 1;
}

.campus-activity__title-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.campus-activity__subtitle {
  margin: 0;
  color: var(--praise-muted);
  font-size: clamp(15px, 1.45vw, 18px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
}

.campus-activity__subtitle span { color: var(--praise-pink); }

.principle-card:nth-child(1) { background: #f9dfe7; }
.principle-card:nth-child(2) { background: #dcefdc; }
.principle-card:nth-child(3) { background: #fff0c5; }
.principle-card:nth-child(4) { background: #dcecf5; }

.education-practice__gallery--four {
  grid-template-areas: "a a a a a a b b b b b b" "c c c c c c d d d d d d";
}

.education-practice--blush .education-practice__gallery--four img {
  height: 100%;
  object-fit: cover;
}

.campus-activity__heading {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.campus-activity__sticker {
  display: block;
  width: 60px;
  height: 100px;
  background-image: var(--campus-activity-stickers);
  background-repeat: no-repeat;
  background-size: 500% 100%;
  pointer-events: none;
}

.campus-activity__sticker--art { background-position: 0% center; }
.campus-activity__sticker--physical { background-position: 25% center; }
.campus-activity__sticker--outdoor { background-position: 50% center; }
.campus-activity__sticker--festival { background-position: 75% center; }
.campus-activity__sticker--graduation { background-position: 100% center; }

.home-moments__photo:first-child,
.about-page__hero-photo,
.about-page__story-photo,
.about-page__photos figure:first-child,
.about-page__memory-grid figure:first-child,
.education-intro__photo,
.education-practice__gallery figure:first-child,
.education-moments__grid figure:first-child,
.campus-activity .campus-photo:first-child,
.contact-gallery figure:first-child {
  border-radius: 22px;
}

@media (max-width: 768px) {
  .home-hero {
    min-height: 700px;
  }

  .hero-slide img {
    filter: saturate(1.04) brightness(.98);
  }

  .hero-overlay {
    background: rgba(255, 249, 234, .14);
  }

  .hero-content {
    padding: 54px 28px 82px;
  }

  .hero-tag {
    border-color: rgba(255, 255, 255, .84);
    background: rgba(255, 252, 243, .9);
    color: #281b37;
    backdrop-filter: blur(8px);
  }

  .hero-intro h1,
  .hero-intro h1 small,
  .hero-intro .site-p,
  .hero-contact {
    text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
  }

  .hero-intro h1 { font-size: 38px; }
  .hero-intro h1 small { font-size: 28px; }
  .hero-intro .site-p { font-size: 16px; }

  .hero-intro .site-p { margin-bottom: 13px; }
  .hero-values { gap: 8px; margin-bottom: 20px; }
  .hero-value { gap: 5px; font-size: 13px; }
  .hero-value__icon { font-size: 18px; }

  .campus-activity__title-row { column-gap: 10px; }
  .campus-activity__subtitle { font-size: 14px; }

  .principle-card:nth-child(1) { background: #f9dfe7; }
  .principle-card:nth-child(2) { background: #dcefdc; }
  .principle-card:nth-child(3) { background: #fff0c5; }
  .principle-card:nth-child(4) { background: #dcecf5; }

  .education-practice__gallery--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "a b" "c d";
  }

  .campus-activity__heading {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
  }

  .campus-activity__sticker {
    width: 44px;
    height: 74px;
  }

  .campus-activity__heading .site-kicker {
    max-width: 230px;
    font-size: 9px;
    letter-spacing: .12em;
  }

  .campus-activity--art::after,
  .campus-activity--physical::before,
  .campus-activity--outdoor::after,
  .campus-activity--festival::before,
  .campus-activity--graduation::after {
    top: 58px;
    right: 8px;
    bottom: auto;
    width: 46px;
    opacity: .68;
  }
}

.home-page .home-moments::before {
  top: 0;
  right: clamp(14px, 1.8vw, 28px);
  width: 92px;
}

.home-page .hero-slide img {
  filter: saturate(1) brightness(.9);
}

.home-page .hero-overlay {
  background: transparent;
}

.home-page .hero-intro h1,
.home-page .hero-intro h1 small,
.home-page .hero-intro .site-p,
.home-page .hero-contact {
  text-shadow: 0 2px 12px rgba(17, 20, 18, .36);
}

@media (max-width: 768px) {
  .home-page .hero-slide img {
    filter: saturate(1.05) brightness(1.06);
  }

  .home-page .hero-overlay {
    background: transparent;
  }

  .home-page .home-moments::before {
    top: 0;
    right: 10px;
    width: 64px;
    opacity: .72;
  }

  .home-page .home-moments__photo:first-child figcaption {
    right: auto;
    left: 14px;
    transform: none;
  }
}