/* Homepage — the six-course watercolour gallery. */
#hyB-courses.hy-watercolour-gallery{--wc-red:#b12e2c;--wc-ink:#262925;--wc-muted:#656962;--wc-ease:cubic-bezier(.2,.72,.2,1);background:#fff;color:var(--wc-ink);scroll-margin-top:100px}
#hyB-courses .wc-wrap{max-width:1440px;margin:0 auto;padding:clamp(62px,6vw,88px) 40px}
#hyB-courses .wc-heading{max-width:980px;margin:0 auto clamp(30px,4vw,54px);text-align:center}
#hyB-courses .wc-eyebrow{margin:0 0 18px;color:var(--wc-red);font-size:13px;font-weight:600;letter-spacing:.16em}
#hyB-courses .wc-heading h2{margin:0;font-family:'Noto Serif TC','Songti TC',serif;font-weight:500;font-size:clamp(30px,3.5vw,46px);line-height:1.4;letter-spacing:.025em;text-wrap:balance}
#hyB-courses .wc-heading h2 em{color:var(--wc-red);font-style:normal}
#hyB-courses .wc-lede{max-width:850px;margin:24px auto 0;font-size:16px;line-height:1.85;color:var(--wc-muted);text-wrap:balance}
#hyB-courses .wc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:54px 52px}
#hyB-courses .wc-course{display:flex;flex-direction:column;min-width:0;color:inherit;text-decoration:none;outline-offset:8px;border-radius:2px;-webkit-tap-highlight-color:rgba(177,46,44,.08)}
#hyB-courses .wc-course:focus-visible{outline:2px solid var(--wc-red)}
#hyB-courses .wc-scene{position:relative;display:block;isolation:isolate;aspect-ratio:1.68;margin:0 -8px 20px}
#hyB-courses .wc-art-shell{display:block;position:absolute;aspect-ratio:1;mix-blend-mode:multiply;transform:translate3d(0,var(--wc-scroll,0px),0)}
#hyB-courses .wc-left{width:42%;left:0;bottom:6%;--wc-turn:-6deg;z-index:1}
#hyB-courses .wc-middle{width:58%;left:21%;top:1%;--wc-turn:0deg;z-index:2}
#hyB-courses .wc-right{width:42%;right:0;bottom:0;--wc-turn:5deg;z-index:3}
#hyB-courses .wc-art{width:100%;height:auto;display:block;aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply;transform:translate3d(0,0,0) rotate(var(--wc-turn));transition:transform 850ms var(--wc-ease);pointer-events:none;user-select:none;-webkit-user-drag:none}
#hyB-courses .wc-copy{display:flex;flex-direction:column;flex:1;min-width:0}
#hyB-courses .wc-age{display:block;color:var(--wc-muted);font-size:12px;font-weight:500;letter-spacing:.075em;line-height:1.65;margin-bottom:10px}
#hyB-courses .wc-title{font-family:'Noto Serif TC','Songti TC',serif;font-size:clamp(22px,1.9vw,28px);line-height:1.5;font-weight:500;margin:0;min-height:1.5em;letter-spacing:.015em;text-wrap:balance;overflow-wrap:break-word}
[data-langroot="en"] #hyB-courses .wc-title{min-height:3em}
#hyB-courses .wc-desc{font-size:15px;line-height:1.85;color:var(--wc-muted);margin:14px 0 24px;text-wrap:pretty}
#hyB-courses .wc-cta{position:relative;isolation:isolate;overflow:hidden;margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;gap:24px;color:var(--wc-red);font-size:15px;font-weight:500;line-height:1.4;min-height:46px;min-width:170px;max-width:100%;padding:10px 23px;border:1px solid #cc8982;border-radius:999px;transition:color 520ms ease}
#hyB-courses .wc-cta::before{content:"";position:absolute;inset:0;z-index:0;background:var(--wc-red);border-radius:inherit;transform:translateY(105%);transition:transform 520ms var(--wc-ease)}
#hyB-courses .wc-cta>span,#hyB-courses .wc-cta i{position:relative;z-index:1}
#hyB-courses .wc-cta i{font-style:normal;font-size:18px;line-height:1}
#hyB-courses .wc-morewrap{text-align:center;margin:46px 0 0;padding:26px 0 0;border-top:1px solid #e6e6e3}
#hyB-courses .wc-more{display:inline-flex;align-items:center;gap:28px;padding:12px 8px;color:var(--wc-red);text-decoration:none;font-size:16px;font-weight:600}
#hyB-courses .wc-more i{font-style:normal;transition:transform 650ms var(--wc-ease)}
#hyB-courses .wc-more:focus-visible{outline:2px solid var(--wc-red);outline-offset:4px}
@media(hover:hover) and (pointer:fine){
  #hyB-courses .wc-course:hover .wc-left .wc-art{transform:translate3d(-5px,-6px,0) rotate(-2deg)}
  #hyB-courses .wc-course:hover .wc-middle .wc-art{transform:translate3d(0,-10px,0) rotate(1deg)}
  #hyB-courses .wc-course:hover .wc-right .wc-art{transform:translate3d(5px,-5px,0) rotate(1deg)}
  #hyB-courses .wc-course:hover .wc-cta{color:#fff}
  #hyB-courses .wc-course:hover .wc-cta::before{transform:translateY(0)}
  #hyB-courses .wc-more:hover i{transform:translate(4px,-4px)}
}
#hyB-courses .wc-course:focus-visible .wc-middle .wc-art{transform:translate3d(0,-8px,0) rotate(1deg)}
#hyB-courses .wc-course:focus-visible .wc-cta,#hyB-courses .wc-course:active .wc-cta{color:#fff}
#hyB-courses .wc-course:focus-visible .wc-cta::before,#hyB-courses .wc-course:active .wc-cta::before{transform:translateY(0)}
@media(max-width:1080px){
  #hyB-courses .wc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 46px}
  #hyB-courses .wc-wrap{padding-left:30px;padding-right:30px}
  #hyB-courses .wc-title{font-size:26px}
  #hyB-courses .wc-scene{max-width:420px;width:calc(100% + 16px);align-self:center}
}
@media(max-width:620px){
  #hyB-courses .wc-wrap{padding:52px 24px 40px}
  #hyB-courses .wc-grid{grid-template-columns:1fr;gap:42px}
  #hyB-courses .wc-course{max-width:440px;width:100%;margin:0 auto}
  #hyB-courses .wc-heading{margin-bottom:24px}
  #hyB-courses .wc-heading h2{font-size:31px;line-height:1.5}
  #hyB-courses .wc-lede{font-size:15px;margin-top:20px}
  #hyB-courses .wc-scene{margin-bottom:18px;max-width:380px}
  #hyB-courses .wc-title{min-height:0;font-size:27px}
  [data-langroot="en"] #hyB-courses .wc-title{min-height:0}
  #hyB-courses .wc-desc{font-size:15px;margin:14px 0 16px}
  #hyB-courses .wc-age{font-size:12px;margin-bottom:8px}
  #hyB-courses .wc-cta{min-height:46px}
  #hyB-courses .wc-morewrap{margin-top:30px}
}
@media(prefers-reduced-motion:reduce){
  #hyB-courses .wc-art-shell{transform:none!important}
  #hyB-courses .wc-art,#hyB-courses .wc-cta,#hyB-courses .wc-cta::before,#hyB-courses .wc-more i{transition:none!important}
  #hyB-courses .wc-course:hover .wc-art,#hyB-courses .wc-course:focus-visible .wc-art{transform:rotate(var(--wc-turn))}
}