:root{--header-height:124px;--brand-red:#CF0F0F;--text:#000000;--line:#d8d8d8;--gutter:clamp(20px,7.3vw,112px)}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}

body{margin:0;color:var(--text);background:#fff;font-family:"Noto Sans SC",Arial,"PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}

body.menu-open{overflow:hidden}

button,a{-webkit-tap-highlight-color:transparent}

a{color:inherit;text-decoration:none}

button{font:inherit}

img{display:block;max-width:100%}

.site-container{max-width:1440px;margin-inline:auto;padding-inline:var(--gutter)}

.skip-link{position:absolute;left:12px;top:-100px;z-index:1100;background:#fff;padding:12px}

.skip-link:focus{top:12px}

.site-header{position:relative;z-index:1001;height:var(--header-height);width:100%;background:#fff;border-bottom:1px solid #f1f1f1}

.site-header__inner{height:100%;max-width:1500px;padding-inline:var(--gutter);margin:auto;display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,3vw,54px)}

.site-brand{display:flex;align-items:center;flex:none;min-width:0}

.site-brand__image{width:clamp(216px,27vw,290px);height:auto;object-fit:contain}

.site-navigation{display:flex;align-items:center;justify-content:flex-end;gap:clamp(16px,2.7vw,43px);white-space:nowrap}

.site-navigation__link{font-size:clamp(14px,1.2vw,16px);line-height:1.5;position:relative;padding-block:9px;transition:color .2s}

.site-navigation__link:hover,.site-navigation__link:focus-visible{color:var(--brand-red)}

.site-navigation__link:focus-visible,.site-menu-toggle:focus-visible,.site-mobile-menu__item:focus-visible{outline:2px solid var(--brand-red);outline-offset:4px}

.site-menu-toggle{position:relative;display:none;width:44px;height:44px;border:0;padding:10px 7px;background:transparent;cursor:pointer;flex:none;align-items:center;justify-content:center;flex-direction:column;gap:15px}

.site-menu-toggle__bar{height:1px;width:26px;background:#000;display:block;flex:none;transition:transform .25s,opacity .2s}

/* Third SVG line, centred between the existing first and last bars. */
.site-menu-toggle::before{content:"";position:absolute;top:50%;left:50%;width:26px;height:1px;background:#000;transform:translate(-50%,-50%);transition:opacity .2s}

.site-mobile-menu{display:none}

.home-hero{width:100%;height:clamp(360px,calc(85svh - var(--header-height)),920px);min-height:360px;background:#d9d9d9;position:relative;overflow:hidden}

.home-hero__media,.home-hero__media img{display:block;width:100%;height:100%}

.home-hero__media img{object-fit:cover;object-position:center center}

.site-footer{background:#fff;border-top:1px solid #eee;color:#777;font-size:12px}

.site-footer__inner{min-height:90px;display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap}

.inner-page{min-height:calc(100svh - var(--header-height) - 90px);padding:68px 0 100px}

.inner-page h1{font-size:clamp(24px,3vw,38px);font-weight:500;margin:0 0 35px}

.inner-page__placeholder{min-height:420px;background:#ededed}

@media (max-width:1100px){

:root{--header-height:76px;--gutter:clamp(20px,5vw,58px)}

.site-navigation{display:none}

.site-menu-toggle{display:flex;order:-1}

.site-header__inner{justify-content:flex-start;gap:24px}

.site-brand__image{width:clamp(155px,23vw,224px)}

.site-mobile-menu{display:block;position:fixed;z-index:1000;inset:var(--header-height) 0 0;background:#f8f8f8;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s}

.site-mobile-menu.is-open{visibility:visible;opacity:1;transform:translateY(0)}

.site-mobile-menu__nav{padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}

.site-mobile-menu__item{display:flex;align-items:center;justify-content:space-between;min-height:71px;border-bottom:1px solid #d1d1d1;background:#f8f8f8;font-size:18px;line-height:1.5;padding-left:clamp(20px,3vw,36px)}

.site-mobile-menu__item span:first-child{padding-right:18px}

.site-mobile-menu__arrow{width:48px;align-self:stretch;display:flex;align-items:center;justify-content:center;border-left:1px solid #d1d1d1;font-size:27px;font-weight:300}

.site-mobile-menu__item:hover,.site-mobile-menu__item.is-current{color:var(--brand-red)}

.menu-open .site-menu-toggle__bar:first-child{transform:translateY(8px) rotate(45deg)}

.menu-open .site-menu-toggle__bar:last-child{transform:translateY(-8px) rotate(-45deg)}

.menu-open .site-menu-toggle::before{opacity:0}

}

@media (max-width:767px){

:root{--header-height:62px;--gutter:20px}

.site-header__inner{position:relative;gap:28px;padding-inline:20px}

/* Center the mobile logo against the entire header, not the menu button. */
.site-brand{position:absolute;left:50%;transform:translateX(-50%);max-width:calc(100% - 112px)}

.site-brand__image{width:160px;max-width:100%;max-height:44px}

.site-menu-toggle{width:36px;padding:7px 4px}

.site-menu-toggle__bar{width:26px}

.home-hero{height:clamp(220px,calc(50svh - var(--header-height)),850px);min-height:300px}

.inner-page{padding:42px 0 65px}

.inner-page__placeholder{min-height:360px}

.site-footer__inner{justify-content:flex-start;padding-block:22px}

}

@media (max-width:360px){.site-header__inner{gap:12px}.site-brand__image{width:145px}.site-mobile-menu__item{font-size:16px}}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}



/* =============================================================

   HOME — Association introduction (follows hero)

   On wide screens, introductory copy begins about one-third

   from the left. On smaller screens it spans the content width.

   ============================================================= */

.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.home-intro{width:100%;background:#f3f3f3;padding:80px 0 70px}

.home-intro__inner{width:min(100%,966px);margin-inline:auto;padding-inline:32px;display:grid;grid-template-columns:28% minmax(0,1fr);column-gap:0}

.home-intro__content{width:100%;max-width:595px}

.home-intro__description{margin:0 0 25px;font-size:20px;line-height:1.45;font-weight:400;letter-spacing:0;color:#111;overflow-wrap:anywhere}

.home-intro__button{display:inline-flex;align-items:center;justify-content:center;min-height:39px;padding:10px 25px;background:#CF0F0F;color:#fff;border-radius:4px;font-size:20px;font-weight:600;line-height:1.25;transition:background-color .2s ease}

.home-intro__button:hover,.home-intro__button:focus-visible{background:#CF0F0F;color:#fff}

.home-intro__button:focus-visible{outline:2px solid #111;outline-offset:3px}

.home-intro__accent{display:block;margin-top:20px;width:65px;height:2px;background:#CF0F0F;max-width:100%;transition:width .52s cubic-bezier(.22,1,.36,1)}

@media(max-width:767px){

  .home-intro{padding:49px 0 58px}

  .home-intro__inner{padding-inline:24px;display:block}

  .home-intro__space{display:none}

  .home-intro__content{max-width:600px;margin-inline:auto}

  .home-intro__description{font-size:14px;line-height:1.65;margin-bottom:23px}

  .home-intro__button{font-size:15px;min-height:42px}

  .home-intro__accent{margin-top:19px}

}

@media(max-width:360px){

  .home-events__heading{justify-content: space-between;}

}



/* Homepage hero carousel — append to the bottom of your existing site.css */

.home-hero--carousel{isolation:isolate;outline-offset:-4px;touch-action:pan-y pinch-zoom}

.home-hero--carousel .home-hero__slides{position:absolute;inset:0}

.home-hero--carousel .home-hero__slide{position:absolute;inset:0;opacity:0;visibility:hidden;z-index:0;transition:opacity .5s ease,visibility .5s ease;background:#d9d9d9}

.home-hero--carousel .home-hero__slide.is-active{opacity:1;visibility:visible;z-index:1}

.home-hero--carousel .home-hero__media,.home-hero--carousel .home-hero__media img{width:100%;height:100%;display:block}

.home-hero--carousel .home-hero__media img{object-fit:cover;object-position:center}

.home-hero--carousel .home-hero__nav{position:absolute;top:50%;z-index:3;transform:translateY(-50%);width:60px;height:60px;padding:0;border:0;background:rgba(50,50,50,.48);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s ease}

.home-hero--carousel .home-hero__nav--prev{left:0}

.home-hero--carousel .home-hero__nav--next{right:0}

.home-hero--carousel .home-hero__nav:hover{background:rgba(25,25,25,.75)}

.home-hero--carousel .home-hero__nav:focus-visible{outline:3px solid #e02020;outline-offset:-3px}

.home-hero--carousel .home-hero__nav svg{display:block;flex:none}

@media(max-width:767px){.home-hero--carousel .home-hero__nav{width:40px;height:54px;background:rgba(50,50,50,.46)}.home-hero--carousel .home-hero__nav svg{width:20px;height:20px}}

@media(prefers-reduced-motion:reduce){.home-hero--carousel .home-hero__slide{transition:none}}





/* HOME — Current activities: wide horizontally scrolling carousel */

.home-events{background:#fff;padding:78px 0 100px;overflow:hidden}

.home-events__outer{margin-left:clamp(24px,7.8vw,144px);margin-right:0;max-width:1800px}

.home-events__heading{display:flex;align-items:center;gap:24px;margin-bottom:31px}

.home-events__heading h2{font-weight:400;font-size:clamp(20px,1.8vw,26px);line-height:1.35;margin:0;white-space:nowrap}

.home-events__controls{display:flex;align-items:center;gap:16px}

.home-events__arrow{display:inline-flex;justify-content:center;align-items:center;padding:4px 0;border:0;background:transparent;color:#000;cursor:pointer;transition:opacity .2s}

.home-events__arrow:hover:not(:disabled){opacity:.55}

.home-events__arrow:disabled{opacity:.28;cursor:default}

.home-events__arrow:focus-visible{outline:2px solid #b62820;outline-offset:5px}

.home-events__track{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding-right:clamp(24px,7.8vw,144px);-webkit-overflow-scrolling:touch}

.home-events__track::-webkit-scrollbar{display:none}

.home-events__card{flex:0 0 clamp(240px,26vw,350px);min-width:0;scroll-snap-align:start}

.home-events__image-link{display:block;width:100%;aspect-ratio:1.77;background:#d9d9d9;overflow:hidden}

.home-events__image{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}

.home-events__image-link:hover .home-events__image{transform:scale(1.035)}

.home-events__placeholder{width:100%;height:100%;background:#d9d9d9}

.home-events__card-title{font-size:20px;line-height:1.55;font-weight:400;margin:14px 0 8px;overflow-wrap:anywhere}

.home-events__card-title a:hover{color:#CF0F0F}

.home-events__meta{display:flex;align-items:center;gap:9px;font-size:14px;line-height:1.45;margin-top:5px}

.home-events__meta svg{flex:none;width:13px;height:13px;margin-top:1px}

.home-events__status{margin:0;color:#666;font-size:14px;padding:24px 24px 24px 0}

@media(max-width:767px){.home-events{padding:55px 0 68px}.home-events__outer{margin-left:24px}.home-events__heading{gap:14px;margin-bottom:23px}.home-events__heading h2{font-size:21px}.home-events__controls{gap:13px;padding-right: 15px;}.home-events__arrow svg{width:30px}.home-events__track{gap:14px;padding-right:24px}.home-events__card{flex-basis:min(78vw,320px)}.home-events__card-title{font-size:14px}}

@media(prefers-reduced-motion:reduce){.home-events__track{scroll-behavior:auto}.home-events__image{transition:none}}



/* HOME CURRENT ACTIVITIES — desktop two-column layout.

   Merged into original stylesheet.

   Does not affect the API, carousel JavaScript, or other sections. */

@media (min-width: 1101px) {

  .home-events {

    padding: 100px 0 115px;

  }

  .home-events__outer {

    display: grid;

    grid-template-columns: clamp(180px, 18vw, 235px) minmax(0, 1fr);

    align-items: start;

    margin-left: clamp(32px, 7.3vw, 112px);

    margin-right: 0;

    max-width: none;

  }

  .home-events__heading {

    grid-column: 1;

    grid-row: 1;

    position: relative;

    display: block;

    margin: 0;

    padding-right: 18px;

  }

  .home-events__heading h2 {

    margin: 0;

    font-size: clamp(22px, 2vw, 32px);

    font-weight: 400;

  }

  .home-events__controls {

    position: absolute;

    top: 0;

    left: calc(100%);

    z-index: 2;

    display: flex;

    gap: 25px;

    white-space: nowrap;

  }

  .home-events__track {

    grid-column: 2;

    grid-row: 1;

    min-width: 0;

    margin-top: 68px;

    gap: 24px;

    padding-right: clamp(24px, 6vw, 110px);

  }

  .home-events__card {

    flex: 0 0 clamp(285px, 28vw, 360px);

  }

  .home-events__image-link {

    aspect-ratio: 16 / 9;

  }

  .home-events__card-title {

    margin: 12px 0 8px;

  }

}

/* Tablet and mobile deliberately retain the site's existing carousel layout. */

/* HOME: introduction underline and current activities arrows.

   Styles merged into this file. */



@media (hover: hover) and (pointer: fine) {

  .home-intro__button:hover ~ .home-intro__accent,

  .home-intro__button:focus-visible ~ .home-intro__accent,

  .home-intro__accent:hover {

    width: 130px;

  }

}



/* HOME EVENTS — original 38px SVG; arrow tail fixed, tip moves on hover. */
.home-events__controls .home-events__arrow,
.gallery-pagination .gallery-pagination__arrow {
  flex: 0 0 38px;
  width: 38px;
  height: 32px;
  padding: 0;
  overflow: visible;
}
.home-events__controls .home-events__arrow svg,
.gallery-pagination .gallery-pagination__arrow svg {
  display: block;
  width: 38px;
  height: 20px;
  overflow: visible;
  opacity: 1;
}
.home-events__arrow .arrow-line,
.home-events__arrow .arrow-head,
.gallery-pagination__arrow .arrow-line,
.gallery-pagination__arrow .arrow-head {
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.home-events__arrow--prev .arrow-line,
.gallery-pagination__arrow--prev .arrow-line { transform-origin: 37px 10px; }
.home-events__arrow--next .arrow-line,
.gallery-pagination__arrow--next .arrow-line { transform-origin: 1px 10px; }
@media (hover: hover) and (pointer: fine) {
  .home-events__arrow--prev:hover:not(:disabled) .arrow-line,
  .gallery-pagination__arrow--prev:hover:not(:disabled) .arrow-line { transform: scaleX(1.689655); }
  .home-events__arrow--prev:hover:not(:disabled) .arrow-head,
  .gallery-pagination__arrow--prev:hover:not(:disabled) .arrow-head { transform: translateX(-20px); }
  .home-events__arrow--next:hover:not(:disabled) .arrow-line,
  .gallery-pagination__arrow--next:hover:not(:disabled) .arrow-line { transform: scaleX(1.689655); }
  .home-events__arrow--next:hover:not(:disabled) .arrow-head,
  .gallery-pagination__arrow--next:hover:not(:disabled) .arrow-head { transform: translateX(20px); }
}
@media (prefers-reduced-motion: reduce) {
  .home-events__arrow .arrow-line,
  .home-events__arrow .arrow-head,
  .gallery-pagination__arrow .arrow-line,
  .gallery-pagination__arrow .arrow-head { transition: none; }
}

/* =========================================================

   HOME — President's message + Calligraphy centre courses

   Both sections intentionally have no dependency on JS.

   ========================================================= */

.home-president{background:#f3f3f3;padding:100px 0 80px}

.home-president__inner{width:min(100% - 48px,1060px);margin:0 auto;display:grid;grid-template-columns: 36% minmax(0,1fr);grid-template-areas:"heading portrait" "message message";column-gap:28px;row-gap:50px}

.home-president__heading{grid-area:heading;min-width:0;padding-top:4px}

.home-president__heading h2{margin:0;font-size:clamp(22px,2vw,32px);font-weight:400;line-height:1.3}
.home-courses__inner>h2{margin:0;font-size:clamp(22px,2vw,32px);font-weight:500;line-height:1.3}

.home-president__identity{display:flex;flex-direction:column;gap:2px;margin-top:30px;font-size:20px;line-height:1.5}

.home-president__identity strong{font-weight:600;}

.home-president__identity span{font-size: 16px;}

.home-president__accent{display:block;width:22px;height:2px;background:#CF0F0F;margin-top:20px}

.home-president__portrait{grid-area:portrait;width:100%;aspect-ratio:1.7;min-height:220px;background:#d9d9d9;overflow:hidden}

.home-president__portrait img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}

.home-president__message{grid-area:message;width:min(100%,710px)}

.home-president__message p{margin:0;font-size:20px;line-height:1.65;overflow-wrap:anywhere}

.home-courses{background:#fff;padding:86px 0 105px}

.home-courses__inner{width:min(100% - 48px,1060px);margin:0 auto;display:grid;grid-template-columns:29% minmax(0,1fr);gap:26px}

.home-courses__content{min-width:0;border-top:0.5px solid #CF0F0F;margin-top: 55px;}

.home-courses__group{display:grid;grid-template-columns:34% minmax(0,1fr);gap:12px;padding:35px 0 34px;border-bottom:0.5px solid #CF0F0F}

.home-courses__group h3{margin:0;color:#CF0F0F;font-size:30px;font-weight:600;line-height:1.4}

.home-courses__sessions{display:grid;gap:38px}

.home-courses__session{display:grid;grid-template-columns:34% minmax(0,1fr);gap:12px;align-items:start}

.home-courses__session>span{font-size:20px;line-height:1.6;white-space:nowrap}

.home-courses__session time{font-size:clamp(20px,2vw,32px);line-height:1.35;white-space:nowrap;font-variant-numeric:tabular-nums}

.home-courses__suffix{font-size:.58em;vertical-align:baseline}

/* Course enquiry: plain text with stacked phone numbers */
.home-courses__contact{display:flex;justify-content:flex-end;align-items:flex-start;gap:15px;margin:35px 0 0;font-size:20px;line-height:1.6}

.home-courses__contact-label{flex:none}
.home-courses__contact-numbers{display:flex;flex-direction:column;align-items:flex-start;font-variant-numeric:tabular-nums}

.home-courses__contact-numbers span{display:block;white-space:nowrap}

@media (max-width:1100px){
 .home-president__inner,
 .home-courses__inner
 {width: min(100% - 150px,1060px);}

 .about-page__container,
 .about-page__titleband .about-page__container,
 .council-page__heading,
 .museum-page__container,
 .activity-page__container,
 .activity-page-event-info__container,
 .contact-page__container {
  width: min(100% - 100px,1060px)!important;
 }

 .activity-detail__register {flex: 0 0 350px!important;}
}

@media(max-width:767px){

 .home-president{padding:45px 0 48px}

 .home-president__inner{width:calc(100% - 40px);grid-template-columns:1fr;grid-template-areas:"heading" "portrait" "message";row-gap:24px}

 .home-president__identity{margin-top:18px;font-size: 18px;}.home-president__accent{margin-top:14px}
 .home-president__identity span{font-size: 14px;}

 .home-president__portrait{aspect-ratio:4/3;min-height:0}

 .home-president__message{width:100%}.home-president__message p{font-size:14px;line-height:1.7}

 .home-courses{padding:58px 0}.home-courses__inner{width:calc(100% - 40px);display:block}

 .home-courses__inner>h2{margin-bottom:27px}

 .home-courses__group{grid-template-columns:1fr;gap:20px;padding:27px 0}

 .home-courses__group h3{font-size:21px}

 .home-courses__sessions{gap:20px}

 .home-courses__session{grid-template-columns:minmax(70px,1fr) auto;gap:10px}

 /* .home-courses__session time{font-size:clamp(16px,4vw,21px)} */

 .home-courses__contact{justify-content:flex-start;flex-wrap:wrap;column-gap:10px;row-gap:4px;font-size:13px;margin-top:27px;flex-direction: column;}
 .home-courses__contact-label{flex:0 1 auto}

}

@media(max-width:350px){.home-courses__session time{font-size:24px}}



/* ==========================================================

   Shared responsive footer (Phase 5)

   Replaces prior light minimal footer rules without disturbing sections.

   ========================================================== */

.site-footer{background:#050505;color:#f6f6f6;border:0;font-size:12px;line-height:1.42}

.site-footer__wrap{max-width:1440px;margin:0 auto;padding:35px clamp(22px,7.8vw,112px)}

.site-footer__top{display:grid;grid-template-columns:minmax(250px,1.32fr) minmax(0,2.15fr);gap:clamp(22px,4vw,70px);align-items:start;padding-bottom:25px}

.site-footer__brand{display:inline-flex;max-width:295px;align-items:center;text-decoration:none}

.site-footer__brand img{display:block;width:min(100%,295px);height:auto;}

.site-footer__info{display:grid;grid-template-columns:1.1fr 1.1fr .78fr;gap:clamp(18px,3.4vw,54px);align-items:start}

.site-footer__block{min-width:0;overflow-wrap:anywhere}

.site-footer__block h2{margin:0 0 9px;font-size:13px;line-height:1.4;font-weight:400;color:#fff}

.site-footer__block p,.site-footer__block address{font-style:normal;font-size:13px;line-height:1.38;margin:0;color:#e8e8e8}

.site-footer__block a{color:inherit;text-decoration:none}

.site-footer__block a:hover,.site-footer__policies a:hover{text-decoration:underline;text-underline-offset:3px}

.site-footer__bottom{border-top:0.5px solid #fff;display:flex;gap:18px;align-items:center;justify-content:space-between;padding-top:13px}

.site-footer__bottom small{font-size:13px;color:#fff;line-height:1.5;font-weight: 300;}

.site-footer__policies{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;column-gap:clamp(12px,2vw,32px);row-gap:8px}

.site-footer__policies a{font-size:13px;color:#fff;text-decoration:none;white-space:nowrap;font-weight: 300;}

.site-footer a:focus-visible{outline:2px solid #fff;outline-offset:5px}

@media(max-width:1050px){

  .site-footer__top{grid-template-columns:1fr;gap:27px}

  .site-footer__brand{max-width:250px}

  .site-footer__info{grid-template-columns:repeat(3,minmax(0,1fr))}

}

@media(max-width:767px){

  .site-footer__wrap{padding:28px 20px 24px}

  .site-footer__top{display:block;padding-bottom:27px}

  .site-footer__brand{width:295px;max-width:100%;margin-bottom:25px}

  .site-footer__info{display:flex;flex-direction:column;gap:26px}

  .site-footer__block h2{margin-bottom:8px;font-size:13px}

  .site-footer__block p,.site-footer__block address{font-size:12px;line-height:1.35}

  .site-footer__bottom{display:block;padding-top:15px}

  .site-footer__bottom small{display:block;font-size:10px;margin-bottom:16px}

  .site-footer__policies{display:grid;grid-template-columns:max-content max-content;justify-content:start;column-gap:28px;row-gap:5px}

  .site-footer__policies a{font-size:11px}

}

/* @media(max-width:350px){.site-footer__policies{column-gap:18px}} */



/* ABOUT ART — History sections, Phase 6 */

.about-page{background:#fff;color:#000000}

.about-page__titleband .about-page__container{width:min(100% - 40px,1020px);margin-inline:auto;padding:60px 0px;}
.about-page__container{width:min(100% - 40px,1020px);margin-inline:auto;padding:100px 0px;}

.about-page__titleband{background:#f6f6f6;/*padding:60px*/}

.about-page__titleband h1{margin:0 0 9px;font-size:clamp(20px,2vw,32px);font-weight:400;line-height:1.5}

.about-page__title-rule{display:block;height:0.5px;background:#000;width:100%}

.about-page__history-span{display:block;height:0.5px;background:#000;width:100%;margin: 95px 0px;}

/* .about-history{padding:56px 0 69px} */

.about-history+.about-history{border-top:1px solid #d4d4d4}

.about-history__mark{display:flex;align-items:center;justify-content:flex-start;min-height:115px;margin-bottom:16px}

.about-history__mark img{display:block;width:auto;max-width:100%;height:auto;object-fit:contain}

.about-history__mark--seal img{max-height:155px;max-width:155px}

#about-history-committee {
  font-weight: 500;
  font-size:clamp(20px,2vw,32px);
}

.about-history__mark--calligraphy{min-height:110px;margin-bottom:30px}

.about-history__mark--calligraphy img{max-height:165px;max-width:min(100%,675px)}

.about-history h2{font-size:clamp(20px,2vw,32px);font-weight:500;margin:0 0 30px;line-height:1.45}

.about-history__copy{/*max-width:990px;*/font-size:15px;line-height:30px;letter-spacing:.015em}

.about-history__copy p{margin:0 0 18px;font-size: 20px;}

.about-history__copy p:last-child{margin-bottom:0}

.about-history__fallback-seal{display:grid;place-items:center;width:90px;height:90px;border:5px double #c51d27;color:#c51d27;font-size:27px;font-family:serif;font-weight:700;letter-spacing:-.05em}

.about-history__fallback-calligraphy{display:block;font-family:"STKaiti","Kaiti SC","KaiTi","Noto Serif CJK SC",serif;font-size:clamp(34px,5vw,58px);font-weight:700;letter-spacing:.06em}

/* Keep display:grid on the seal fallback when image is absent. */

.about-history__fallback-seal[hidden],.about-history__fallback-calligraphy[hidden]{display:none}

@media(min-width:1200px){.about-page__container{width:min(100% - 150px,1020px)}}

@media(max-width:767px){

 .about-page__container{width:calc(100% - 40px)!important;padding: 50px 0 70px;}

 .about-page__titleband .about-page__container{width:calc(100% - 40px)!important;}

 /* .about-page__titleband{padding:24px 0} */
 /* .about-page__titleband .about-page__container{padding:40px 0} */

 .about-history{padding:43px 0 51px}

 .about-history__mark{min-height:95px;margin-bottom:35px;justify-content: center;}

 /* .about-history__mark--seal img{max-height:93px;max-width:98px} */

 #about-history-committee{text-align: center;max-width: 175px;margin: 0 auto 38px;}
 .about-history__mark--calligraphy{min-height:70px}

 .about-history__mark--calligraphy img{max-height:90px}

 .about-history h2{margin:0 auto 18px;text-align: center;}

 .about-history__copy{max-width: 450px;margin: 0 auto;}
 .about-history__copy p{font-size:14px;line-height:1.85;letter-spacing:0;margin-bottom:17px}

}



/* ===== Council board (public page) — 4 columns, president 2 columns ===== */

.council-page{background:#fff;min-height:65vh}

.council-page__container{width:min(100%);margin:0;}

.council-page__heading{padding:45px 0;background:#fff;width: min(100% - 40px,1020px);margin: 0 auto;}

.council-page__year{color:#CF0F0F;font-weight:600;font-size:clamp(22px, 2vw, 32px);line-height:1.35;margin:0 0 4px}

.council-page__heading h2{margin:0;font-size:clamp(22px, 2vw, 32px);font-weight:600;line-height:1.5}

.council-page__content{padding:0 0 90px}

.council-page__status{color:#666;font-size:15px;padding:40px 0}

.council-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));row-gap:70px;align-items:start}

.council-grid[hidden]{display:none}

.council-member{min-width:0;margin:0}

.council-member--featured{grid-column:span 2}

.council-member__photo{width:100%;aspect-ratio:160/167;overflow:hidden;background:#d9d9d9}

.council-member__photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center center}

.council-member__info{padding:9px 25px 0}

.council-member__name{margin:0;font-size:20px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}

.council-member__position{margin:1px 0 0;font-size:16px;line-height:1.45;overflow-wrap:anywhere}

@media(max-width:767px){

 .council-page__heading{padding:30px 0 18px;width: min(100% - 40px,1020px)!important;margin: 0 auto;}

 /* .council-page__year{font-size:14px} */

 .council-page__heading h2{max-width: 220px;}

 .council-page__content{padding-bottom:60px}

 .council-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:45px 0px}

 .council-member__name{font-size:16px}

 .council-member__position{font-size:12px}

}

/* @media(max-width:380px){.council-page__container{padding-inline:14px}.council-grid{column-gap:10px;row-gap:23px}} */



/* Council photo row height alignment fix (Phase 7.1) */

@media (min-width: 768px) {

  /* Two-column president is wide, but should not be twice as tall. */

  .council-member--featured .council-member__photo {

    aspect-ratio: 8 / 3;

  }

}

@media (max-width: 767px) {

  /* Mobile featured member spans both columns and keeps a readable image. */

  .council-member--featured .council-member__photo {

    aspect-ratio: 4 / 3;

  }

}



/* Council first row — taller than following rows, same height for all three photos. */

@media (min-width: 768px) {

  .council-grid > .council-member:nth-child(-n+3) .council-member__photo {

    height: clamp(270px, 40vw, 600px);

    aspect-ratio: auto;

  }

}

/* Council page only: subtle image zoom within existing photo frame. */
.council-member__photo img {
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
  transform-origin: center center;
}
@media (hover: hover) and (pointer: fine) {
  .council-member__photo:hover img {
    transform: scale(1.1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .council-member__photo img { transition: none; }
}



/* Phase 8 — Xin Shan Calligraphy Museum */

.museum-page{background:#fff;color:#111}

.museum-page__container{width:min(100% - 44px,1120px);margin-inline:auto}




.museum-intro{background:#fff;padding:95px 0 80px}

.museum-intro__mark{display:flex;align-items:center;min-height:104px;margin:0 0 38px}

.museum-intro__mark img{display:block;max-width:min(100%,565px);max-height:140px;width:auto;height:auto;object-fit:contain}

.museum-intro__mark img[hidden]{display:none}

.museum-intro__mark-fallback{font-family:'STKaiti','Kaiti SC','KaiTi','Noto Serif CJK SC',serif;font-size:clamp(35px,5vw,62px);font-weight:700;letter-spacing:.09em}

.museum-intro__mark-fallback[hidden]{display:none}

.museum-intro h2{font-size:clamp(22px, 2vw, 32px);font-weight:600;margin:0 0 38px;line-height:1.45}

.museum-intro__copy{max-width:990px;font-size:20px;line-height:1.85;letter-spacing:.015em;text-align:justify}

.museum-intro__copy p{margin:0 0 19px}

.museum-intro__copy p:last-child{margin-bottom:0}

.museum-courses {background: #f3f3f3;}

@media(min-width:1200px){.museum-page__container{width:min(100% - 150px,1120px)}}

@media(max-width:767px){

  .museum-page__container{width:calc(100% - 40px)!important}


  .museum-intro{padding:40px 0 54px}

  .museum-intro__mark{min-height:78px;}

  .museum-intro__mark img{max-height:84px}

  /* .museum-intro h2{font-size:18px;margin-bottom:17px} */

  .museum-intro__copy{font-size:14px;line-height:1.85;letter-spacing:0;text-align:left}

}





/* ===== Latest activities and activity detail (Phase 9) ===== */

.activity-page{background:#fff;color:#000000;min-height:65vh}

.activity-page__container{width:min(100% - 44px,1020px);margin-inline:auto}

.activity-page-event-info__container{width:min(100% - 44px,1320px);margin-inline:auto}

.activity-page__titleband{background:#f5f5f5;padding:27px 0 22px}

.activity-page__titleband h1{font-weight:400;font-size:clamp(17px,1.6vw,21px);line-height:1.5;margin:0 0 9px}

.activity-page__title-rule{display:block;width:100%;height:1px;background:#c9c9c9}

.activity-page__status{padding-block:70px 100px;color:#777;font-size:15px}

.activity-detail__intro{padding-block:75px 35px}

.activity-detail__title{max-width:780px;margin:0;font-size:clamp(19px,2.2vw,36px);font-weight:400;line-height:1.4;overflow-wrap:anywhere}

.activity-detail__summary{font-size:16px;line-height:1.7;max-width:740px;margin:14px 0 0;color:#666;white-space:pre-line}

.activity-detail__cover{height:clamp(270px,38vw,540px);background:#d9d9d9;overflow:hidden}

.activity-detail__cover-image{width:100%;height:100%;object-fit:cover;object-position:center;display:block}

.activity-detail__info{background:#f1f1f1}

.activity-detail__info-inner{min-height:230px;display:flex;align-items:center;justify-content:space-between;gap:30px;/*padding-block:24px*/}

.activity-detail__meta{display:flex;flex-wrap:wrap;column-gap:54px;row-gap:30px;align-items:center;max-width:770px}

.activity-detail__meta-row{display:flex;gap:22px;align-items:center;font-size:clamp(20px,2vw,30px);font-weight:600;line-height:30px;overflow-wrap:anywhere}

.activity-detail__meta-row svg{display:block;flex:none;stroke:none;fill:none}
.activity-detail__meta-row .activity-detail__icon--date{width:25px;height:27px}
.activity-detail__meta-row .activity-detail__icon--time{width:27px;height:27px}
.activity-detail__meta-row .activity-detail__icon--location{width:25px;height:29px}

.activity-detail__register{align-self:flex-start;display:inline-flex;flex:0 0 450px;min-height:95px;align-items:center;justify-content:space-between;gap:18px;background:#CF0F0F;color:#fff;padding:10px 30px;font-weight:600;font-size:clamp(19px,2vw,32px);transition:background .2s}

.activity-detail__register:hover{background:#CF0F0F;color:#fff}

.activity-detail__register:focus-visible{outline:2px solid #111;outline-offset:3px}

.activity-detail__register-arrow{display:inline-flex;align-items:center;justify-content:center;width:40px;height:41px;flex:none}
.activity-detail__register-arrow svg{display:block;width:100%;height:100%}
/* Registration: arrow stays visible; hover re-draws it from its fixed tail. */
.activity-detail__register-arrow .register-arrow__base{opacity:1;transition:opacity .15s ease}
.activity-detail__register-arrow .register-arrow__trace{stroke-dasharray:100;stroke-dashoffset:100;opacity:0}
@keyframes register-trail-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes register-wing-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@media(hover:hover) and (pointer:fine){
  .activity-detail__register:hover .register-arrow__base,
  .activity-detail__register:focus-visible .register-arrow__base{opacity:.22}
  .activity-detail__register:hover .register-arrow__trace,
  .activity-detail__register:focus-visible .register-arrow__trace{opacity:1}
  .activity-detail__register:hover .register-arrow__trace-trail,
  .activity-detail__register:focus-visible .register-arrow__trace-trail{animation:register-trail-draw .52s cubic-bezier(.4,0,.2,1) both}
  .activity-detail__register:hover .register-arrow__trace-wing,
  .activity-detail__register:focus-visible .register-arrow__trace-wing{animation:register-wing-draw .23s ease .5s both}
}
@media(prefers-reduced-motion:reduce){
  .activity-detail__register-arrow .register-arrow__base{transition:none;opacity:1!important}
  .activity-detail__register-arrow .register-arrow__trace{animation:none!important;opacity:0!important}
}

.activity-detail__sections{padding-block:30px 110px}

.activity-detail__accordion{border-bottom:0.5px solid #F05226;max-width:790px}

.activity-detail__accordion-head{display:flex;justify-content:space-between;align-items:center;gap:26px;padding:35px 15px 35px 0;cursor:pointer;list-style:none;color:#CF0F0F;font-size:clamp(19px,2vw,32px);font-weight:400;line-height:1.5}

.activity-detail__accordion-head::-webkit-details-marker{display:none}

.activity-detail__accordion-head:focus-visible{outline:2px solid #CF0F0F;outline-offset:-2px}

.activity-detail__accordion-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:20px;height:24px;flex:none;font-family:Arial,sans-serif;font-size:30px;font-weight:400;line-height:1;color:currentColor}

/* Fixed-position glyphs: a subtle quarter-turn while + crosses over to −. */
.activity-detail__accordion-icon::before,
.activity-detail__accordion-icon::after{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;transform-origin:center center;transition:opacity .22s ease,transform .32s cubic-bezier(.22,1,.36,1)}
.activity-detail__accordion-icon::before{content:'+';opacity:1;transform:rotate(0deg)}
.activity-detail__accordion-icon::after{content:'-';opacity:0;transform:rotate(-90deg)}
.activity-detail__accordion[open] .activity-detail__accordion-icon::before{opacity:0;transform:rotate(90deg)}
.activity-detail__accordion[open] .activity-detail__accordion-icon::after{opacity:1;transform:rotate(0deg)}
@media(prefers-reduced-motion:reduce){
  .activity-detail__accordion-icon::before,.activity-detail__accordion-icon::after{transition:none}
}

.activity-detail__section-text{padding:0 6px 38px 0;max-width:755px;font-size:20px;line-height:1.9;overflow-wrap:anywhere}

.activity-detail__field-row{display:grid;grid-template-columns:145px minmax(0,1fr);column-gap:18px;align-items:start}
.activity-detail__field-label{font-weight:600}
.activity-detail__field-value{min-width:0;white-space:pre-wrap}
.activity-detail__section-text p{margin:0 0 11px;white-space:pre-line}
.activity-detail__section-text p:last-child{margin-bottom:0}

.activity-detail__no-sections{padding-block:36px 65px;color:#777;font-size:14px}

.activity-list{padding-block:35px 100px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 22px}

.activity-list__item{min-width:0;display:block}.activity-list__cover{aspect-ratio:16/9;background:#d9d9d9;overflow:hidden}

.activity-list__cover img{width:100%;height:100%;object-fit:cover}.activity-list__description h2{font-size:15px;font-weight:500;line-height:1.5;margin:12px 0 8px}

.activity-list__description p{font-size:12px;margin:4px 0;color:#444}.activity-list__item:hover h2{color:#CF0F0F}

@media(max-width:991px){
  .activity-detail__register{flex: 0 0 300px!important;min-height:80px}
}

@media(max-width:767px){

 .activity-page__container{width:calc(100% - 40px)!important}

 .activity-page__titleband{padding:22px 0 17px}

 .activity-detail__intro{padding-block:30px 29px}

 .activity-detail__title{font-size:19px;line-height:1.28}

 .activity-detail__summary{font-size:14px;}

 .activity-detail__cover{height:clamp(240px,46vw,400px)}

 /* Mobile: full-width registration bar directly below the cover, with activity info beneath. */
 .activity-detail__info-inner{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%!important;min-height:0;padding:0}

 .activity-detail__meta{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%;max-width:none;padding:20px 22px 25px}

 /* .activity-detail__meta-row{font-size:13px} */

 .activity-detail__meta-row{gap:20px}

 .activity-detail__register{order:-1;align-self:stretch;flex:none!important;display:flex;width:100%;min-width:0;min-height:65px;margin:0;padding:9px 20px;}
 .activity-detail__register-arrow{width:24px;height:25px}

 .activity-detail__sections{padding-block:15px 60px}

 .activity-detail__accordion{max-width:none}

 .activity-detail__accordion-head{padding-block:24px;}

 .activity-detail__section-text{font-size:16px;line-height:1.6}
  .activity-detail__field-row{grid-template-columns:1fr;column-gap:12px;margin-bottom: 10px;}

 .activity-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 15px;padding-block:28px 75px}

}

@media(max-width:450px){.activity-list{grid-template-columns:1fr}}



/* ==========================================================

   ACTIVITY GALLERY — Phase 10 list and title band

   Namespaced rules, leaving existing sections intact.

   ========================================================== */

.gallery-page{min-height:65vh;background:#fff;color:#151515}

.gallery-page__container{width:min(calc(100% - 44px),1120px);margin:0 auto}




.gallery-page__listing{padding:120px 0 76px}

.gallery-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:105px 42px;scroll-margin-top:35px}

.gallery-list__item{min-width:0}

.gallery-list__link{display:block;text-decoration:none;color:inherit}

.gallery-list__media{width:100%;aspect-ratio:1.5;background:#d9d9d9;overflow:hidden}

.gallery-list__media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .25s}

.gallery-list__link:hover img{transform:scale(1.035)}

.gallery-list__title{margin:25px 0 0;font-size:20px;line-height:1.5;font-weight:400;overflow-wrap:anywhere}

.gallery-list__link:hover .gallery-list__title{color:#CF0F0F}

.gallery-list__link:focus-visible{outline:2px solid #CF0F0F;outline-offset:5px}

.gallery-list__message{grid-column:1/-1;margin:0;min-height:100px;padding:15px 0;color:#666;font-size:14px}

.gallery-pagination{display:flex;justify-content:flex-end;gap:28px;margin-top:43px}

.gallery-pagination[hidden]{display:none}

.gallery-pagination__arrow{background:transparent;border:0;padding:0;width:38px;height:32px;display:grid;place-items:center;color:#000;cursor:pointer;transition:opacity .2s}

.gallery-pagination__arrow svg{display:block;width:38px;height:20px}

.gallery-pagination__arrow:disabled{opacity:.28;cursor:default}

.gallery-pagination__arrow:hover:not(:disabled){opacity:.55}

.gallery-pagination__arrow:focus-visible{outline:2px solid #CF0F0F;outline-offset:4px}

@media(max-width:767px){

 .gallery-page__container{width:calc(100% - 40px)}


 .gallery-page__listing{padding:39px 0 55px}

 .gallery-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px}

 .gallery-list__title{font-size:13px;margin-top:9px}

 .gallery-pagination{margin-top:30px;gap:22px}

}

@media(max-width:420px){.gallery-list{grid-template-columns:1fr;gap:28px}.gallery-list__media{aspect-ratio:1.5}}

@media(prefers-reduced-motion:reduce){.gallery-list__media img{transition:none}}





/* =============================================================

   CONTACT US — Phase 13, isolated rules; safe with previous pages

   ============================================================= */

.contact-page{background:#fff;color:#000000}

.contact-page__container{width:min(100% - 48px,1120px);margin-inline:auto}

.contact-info{padding:54px 0 100px}

.contact-info__lead{margin:0 0 51px;font-size:20px;line-height:1.7}

.contact-info__grid{display:grid;grid-template-columns:1.1fr .95fr .95fr;column-gap:clamp(24px,5vw,85px);row-gap:36px}

.contact-info__block{min-width:0}

.contact-info__block h2{margin:0;color:#CF0F0F;font-size:20px;font-weight:500;line-height:1.35}

.contact-info__accent{display:block;width:29px;height:2px;margin:10px 0 23px;background:#CF0F0F}

.contact-info__block address,.contact-info__block p{margin:0;font-style:normal;font-size:20px;line-height:1.55;overflow-wrap:anywhere}

.contact-info__block a{text-decoration:none;font-size: 20px;}

.contact-info__block a:hover{text-decoration:underline;text-underline-offset:3px}

.contact-info__hours{list-style:none;padding:0;margin:0;display:grid;gap:12px}

.contact-info__hours li{display:grid;grid-template-columns:85px 1fr;gap:10px;align-items:start;font-size:20px;line-height:1.5}

.contact-info__hours time{white-space:nowrap}

.contact-info__numbers{display:flex;flex-direction:column;align-items:flex-start;gap:5px}

.contact-map{width:100%;height:clamp(320px,42vw,520px);background:#e8e8e8;position:relative}

.contact-map iframe{display:block;width:100%;height:100%;border:0}

.contact-map__fallback{display:block;position:absolute;bottom:14px;right:14px;padding:8px 12px;background:#fff;color:#111;font-size:12px;box-shadow:0 1px 8px rgba(0,0,0,.12);text-decoration:underline;text-underline-offset:3px}

.contact-map__fallback:focus-visible,.contact-info a:focus-visible{outline:2px solid #CF0F0F;outline-offset:3px}

@media(max-width:850px){.contact-info__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:42px 32px}}

@media (max-width:767px){
.contact-page__container {width: min(100% - 40px,1120px)!important;}
.contact-info__block address, .contact-info__block p {font-size: 18px;}
}

@media(max-width:600px){

 .contact-page__container{width:calc(100% - 40px)}

 .contact-info{padding:39px 0 49px}

 .contact-info__lead{font-size:14px;line-height:1.75;margin-bottom:35px}

 .contact-info__grid{grid-template-columns:1fr;gap:37px}

 .contact-info__block h2{font-size:16px}

 .contact-info__accent{margin:7px 0 18px}

 .contact-info__block address,.contact-info__block p{font-size:14px}

 .contact-info__hours li{font-size:14px;grid-template-columns:68px 1fr}

 .contact-map{height:360px}

 .contact-info__block a{font-size: 14px;}

}