:root {
  --cream: #F8F3EC; --cream-dark: #EFE6D8;
  --brown: #6B3E26; --brown-light: #8B5E3C; --brown-dark: #3E1F0A;
  --gold: #C9A85C; --text: #2E1A0E; --footer-bg: #1C0F06;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--cream); color:var(--text); font-family:'Josefin Sans',sans-serif; font-weight:300; letter-spacing:0.04em; }

/* NAV */
nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(248,243,236,0.45);
  backdrop-filter:blur(28px) saturate(180%) brightness(1.04);
  -webkit-backdrop-filter:blur(28px) saturate(180%) brightness(1.04);
  border:none;
  outline:none;
  border-bottom:none;
  box-shadow:none;
  height:70px;
}
.nav-inner {
  max-width:1280px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  height:100%; padding:0 24px;
}
.nav-logo { margin-left:-6px; }
.nav-logo img { height:48px; filter:sepia(1) saturate(3) hue-rotate(5deg) brightness(0.42) contrast(1.1); }

@media (max-width:490px) {
  #navLogoImg { display:none; }
  #navLogoMobile {
    display:block !important;
    height:48px;
    width:auto;
    filter:sepia(1) saturate(3) hue-rotate(5deg) brightness(0.42) contrast(1.1);
  }
}
.nav-links { display:flex; align-items:center; gap:16px; flex-wrap:nowrap; }
.nav-links a {
  text-decoration:none; color:var(--brown-dark);
  font-size:0.65rem; letter-spacing:0.09em; text-transform:uppercase;
  font-weight:400; transition:color 0.2s; position:relative; padding-bottom:3px;
  white-space:nowrap;
}
/* Chinese nav: larger, no letter-spacing, remove uppercase (it has no effect on CJK but keeps consistent) */
body.zh .nav-links a {
  font-size:0.75rem; letter-spacing:0.03em; text-transform:none;
}
@media (max-width:1200px) and (min-width:1001px) {
  .nav-inner { padding:0 14px; }
  .nav-logo img { height:48px; }
  .nav-links { gap:10px; }
  .nav-links a { font-size:0.58rem; letter-spacing:0.08em; }
  body.zh .nav-links a { font-size:0.68rem; letter-spacing:0.02em; }
  .lang-btn { font-size:0.56rem; padding:4px 9px; }
}
@media (max-width:1120px) and (min-width:1001px) {
  .nav-links { gap:6px; }
  .nav-links a { font-size:0.55rem; letter-spacing:0.07em; }
  body.zh .nav-links a { font-size:0.64rem; letter-spacing:0.02em; }
  .nav-social svg { width:13px; height:13px; }
}
.nav-links a::after {
  content:''; position:absolute; bottom:0; left:0; width:0; height:1.5px;
  background:var(--brown); transition:width 0.4s cubic-bezier(0.4,0,0.2,1);
}
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-links a:hover, .nav-links a.active { color:var(--brown); }
.nav-social { display:flex; gap:10px; align-items:center; margin-left:10px; margin-right:0; }
.nav-social a { color:var(--brown-dark); transition:color 0.2s; display:flex; align-items:center; }
.nav-social a:hover { color:var(--brown); }
.nav-social svg { width:14px; height:14px; fill:currentColor; }
@media (max-width:1000px) { .nav-links .nav-social, .nav-links + .nav-social { display:none; } }
/* iPad: bigger, bolder social icons in mobile-top-right */
@media (max-width:1000px) {
  .mobile-top-right .nav-social { display:flex !important; }
  .mobile-top-right .nav-social a { color:var(--brown) !important; }
  .mobile-top-right .nav-social svg { width:20px; height:20px; }
}
.lang-btn {
  color:#F5E6CC; border:none; cursor:pointer;
  padding:5px 12px; font-family:'Josefin Sans',sans-serif;
  font-size:0.63rem; letter-spacing:0.1em; border-radius:3px; transition:filter 0.2s;
  background-color: #5A2E10;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='30'%3E%3Crect width='200' height='30' fill='%235A2E10'/%3E%3Cpath d='M0,6 Q40,4 80,7 Q120,10 160,6 Q180,4 200,6' stroke='%23762E10' stroke-width='0.8' fill='none' opacity='0.6'/%3E%3Cpath d='M0,14 Q35,12 75,15 Q115,18 155,13 Q178,11 200,14' stroke='%23622E0E' stroke-width='1' fill='none' opacity='0.5'/%3E%3Cpath d='M0,22 Q45,20 85,23 Q125,26 165,21 Q182,19 200,22' stroke='%23762E10' stroke-width='0.7' fill='none' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 200px 30px;
}
.lang-btn:hover { filter:brightness(1.2); }

/* Wood award badges */
.award-badge {
  color:#F5E6CC; padding:14px 20px; text-align:center; border-radius:8px;
  background-color: #3E1F0A;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Crect width='120' height='80' fill='%233E1F0A'/%3E%3Cpath d='M0,12 Q30,8 60,14 Q90,20 120,12' stroke='%235A2E10' stroke-width='1.2' fill='none' opacity='0.6'/%3E%3Cpath d='M0,28 Q35,22 65,30 Q95,36 120,26' stroke='%23622E0E' stroke-width='0.9' fill='none' opacity='0.5'/%3E%3Cpath d='M0,44 Q28,38 58,46 Q88,52 120,42' stroke='%235A2E10' stroke-width='1.4' fill='none' opacity='0.55'/%3E%3Cpath d='M0,60 Q32,54 62,62 Q92,68 120,58' stroke='%23622E0E' stroke-width='1' fill='none' opacity='0.5'/%3E%3Cpath d='M0,74 Q34,68 64,76 Q94,82 120,72' stroke='%235A2E10' stroke-width='0.8' fill='none' opacity='0.45'/%3E%3C/svg%3E");
  background-size: 120px 80px;
}
.award-badge .num { font-family:'Cormorant Garamond',serif; font-size:2rem; display:block; line-height:1; }
.award-badge .label { font-size:0.6rem; letter-spacing:0.12em; text-transform:uppercase; }

/* Tap hint visible gold */
.lesson-tap-hint {
  display:block; margin-top:12px; font-size:0.64rem; letter-spacing:0.14em;
  text-transform:uppercase; color:#C9A85C; font-weight:600;
  opacity:0; transform:translateY(4px); transition:all 0.3s;
}
.lesson-card:hover .lesson-tap-hint { opacity:1; transform:translateY(0); }
@media (max-width:768px) { .lesson-tap-hint { opacity:0.85; transform:none; } }
.mobile-menu-btn {
  display:none; background:none; border:none; cursor:pointer;
  font-size:1.5rem; color:var(--brown); padding:4px 8px; line-height:1;
  border-radius:8px;
}
.mobile-menu-btn:hover { background:rgba(107,62,38,0.1); }
.mobile-top-right { display:none; align-items:center; gap:10px; }
@media (max-width:1000px) { 
  .mobile-top-right { display:flex; }
  .mobile-top-right .nav-social a { color:var(--brown); }
  .mobile-top-right .nav-social a:hover { color:var(--brown-dark); }
}

/* MOBILE NAV COLLAPSIBLE BAR */
.mobile-nav {
  max-height:0;
  overflow:hidden;
  background:rgba(248,243,236,0.98);
  border-top:none;
  transition:max-height 0.28s ease;
}
.mobile-nav.open {
  border-top:1px solid rgba(107,62,38,0.12);
}
.mobile-nav.open { max-height:520px; }
.mobile-nav-inner {
  display:flex;
  flex-direction:column;
  padding:6px 24px 20px;
}
.mobile-nav a {
  text-decoration:none; color:var(--brown-dark);
  font-size:0.88rem; letter-spacing:0.12em; text-transform:uppercase;
  padding:14px 0; border-bottom:1px solid rgba(107,62,38,0.1);
  font-weight:400;
}
.mobile-nav a:last-of-type { border-bottom:none; }
.mobile-nav-extras {
  display:flex; align-items:center; gap:14px;
  padding:16px 0 4px; border-top:1px solid rgba(107,62,38,0.1); margin-top:8px;
}
.mobile-nav-extras .nav-social { margin:0; }
.mobile-nav-extras .nav-social a { color:var(--brown-dark); }
.mobile-nav-extras .nav-social a:hover { color:var(--brown); }
.mobile-nav-extras .lang-btn { margin-top:0; }

@media (max-width:1000px) {
  .nav-links { display:none; }
  .mobile-menu-btn { display:block; }
  .nav-inner { padding:0 16px; height:70px; }
}

@media (max-width:600px) {
  .mobile-top-right { gap:8px; }
  .mobile-top-right .lang-btn { font-size:0.56rem; letter-spacing:0.08em; padding:7px 10px; }
  .mobile-nav-inner { padding:6px 16px 16px; }
}

/* Very small phones */
@media (max-width:435px) {
  .mobile-top-right { gap:5px; }
  .mobile-top-right .lang-btn { font-size:0.50rem; padding:5px 7px; }
  .mobile-top-right .nav-social { gap:6px; }
  .mobile-top-right .nav-social svg { width:17px; height:17px; }
  .nav-inner { padding:0 10px; }
}

/* HERO */
.hero { height:100vh; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.hero-bg-overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(62,31,10,0.72) 0%,rgba(107,62,38,0.5) 50%,rgba(201,168,92,0.2) 100%); z-index:1; }
.hero-img { position:absolute; inset:0; background-size:cover; background-position:center; z-index:0; transform:scale(1.05); animation:heroZoom 12s ease-in-out infinite alternate; }
@keyframes heroZoom { from{transform:scale(1.05);} to{transform:scale(1);} }
.hero-content { position:relative; z-index:2; text-align:center; padding:20px; animation:fadeUp 1.2s ease both; }
@keyframes fadeUp { from{opacity:0;transform:translateY(30px);} to{opacity:1;transform:translateY(0);} }
.hero-tagline { font-size:0.7rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }
.hero h1 { font-family:'Cormorant Garamond',serif; font-size:clamp(2.4rem,6vw,5rem); font-weight:300; color:#fff; line-height:1.15; margin-bottom:10px; }
.hero h1 em { font-style:italic; color:var(--gold); }
.hero-sub { color:rgba(255,255,255,0.8); font-size:0.82rem; letter-spacing:0.15em; text-transform:uppercase; margin-bottom:40px; }
.hero-btns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; align-items:center; }
.btn-primary {
  color:var(--cream); padding:16px 40px; text-decoration:none; font-size:0.7rem;
  letter-spacing:0.22em; text-transform:uppercase; font-family:'Josefin Sans',sans-serif;
  display:inline-block; position:relative; overflow:hidden; text-align:center;
  background:linear-gradient(135deg, #6B3515 0%, #8B4A1A 45%, #5A2E10 100%);
  border:1px solid rgba(201,168,92,0.45);
  box-shadow:0 4px 20px rgba(62,31,10,0.35), inset 0 1px 0 rgba(255,220,150,0.2);
  transition:all 0.3s;
}
.btn-primary::after {
  content:''; position:absolute; top:0; left:-100%; width:60%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,220,150,0.15),transparent);
  transition:left 0.5s;
}
.btn-primary:hover::after { left:150%; }
.btn-primary:hover { box-shadow:0 6px 28px rgba(62,31,10,0.45),inset 0 1px 0 rgba(255,220,150,0.3); transform:translateY(-1px); }

/* lesson card wood tint */
.lesson-card {
  background-color:#E5D9C8;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300'%3E%3Crect width='400' height='300' fill='%23E5D9C8'/%3E%3Cpath d='M0,18 Q60,12 120,20 Q200,30 280,16 Q340,8 400,18' stroke='%23B89A6A' stroke-width='1' fill='none' opacity='0.25'/%3E%3Cpath d='M0,38 Q70,30 140,40 Q220,51 300,36 Q360,26 400,38' stroke='%23A8845A' stroke-width='0.7' fill='none' opacity='0.2'/%3E%3Cpath d='M0,62 Q55,54 115,64 Q195,76 275,60 Q345,48 400,62' stroke='%23B89A6A' stroke-width='1.2' fill='none' opacity='0.23'/%3E%3Cpath d='M0,88 Q65,80 130,90 Q210,102 290,86 Q352,74 400,88' stroke='%23A8845A' stroke-width='0.8' fill='none' opacity='0.19'/%3E%3Cpath d='M0,115 Q60,106 125,117 Q205,130 285,113 Q348,100 400,115' stroke='%23B89A6A' stroke-width='1.1' fill='none' opacity='0.23'/%3E%3Cpath d='M0,144 Q68,135 135,146 Q215,158 295,142 Q355,130 400,144' stroke='%23A8845A' stroke-width='0.7' fill='none' opacity='0.19'/%3E%3Cpath d='M0,174 Q58,165 118,176 Q198,188 278,172 Q342,160 400,174' stroke='%23B89A6A' stroke-width='1.3' fill='none' opacity='0.22'/%3E%3Cpath d='M0,205 Q64,196 128,207 Q208,220 288,204 Q350,192 400,205' stroke='%23A8845A' stroke-width='0.8' fill='none' opacity='0.19'/%3E%3Cpath d='M0,236 Q62,227 124,238 Q204,251 284,235 Q348,223 400,236' stroke='%23B89A6A' stroke-width='1' fill='none' opacity='0.21'/%3E%3Cpath d='M0,268 Q66,259 130,270 Q210,283 290,267 Q352,255 400,268' stroke='%23A8845A' stroke-width='0.7' fill='none' opacity='0.18'/%3E%3Cpath d='M0,292 Q60,284 120,294 Q200,306 280,290 Q344,278 400,292' stroke='%23B89A6A' stroke-width='1.1' fill='none' opacity='0.2'/%3E%3C/svg%3E");
  background-size:400px 300px;
  padding:48px 36px; border:1px solid rgba(107,62,38,0.12);
  transition:all 0.3s; position:relative; overflow:hidden;
}
.btn-outline {
  background:rgba(255,255,255,0.08); color:#fff; padding:16px 40px;
  text-decoration:none; font-size:0.7rem; letter-spacing:0.22em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,0.5); transition:all 0.3s;
  font-family:'Josefin Sans',sans-serif; display:inline-block;
  backdrop-filter:blur(8px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn-outline:hover { background:rgba(255,255,255,0.18); border-color:#fff; transform:translateY(-1px); }

/* FLOATING BUTTONS */

.back-to-top {
  position:fixed; bottom:28px; right:28px; z-index:1500;
  width:40px; height:40px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(62,31,10,0.75); color:var(--cream); font-size:1rem;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(8px); opacity:0; pointer-events:none;
  transition:all 0.3s; box-shadow:0 2px 12px rgba(62,31,10,0.25);
}
.back-to-top.visible { opacity:1; pointer-events:all; }
.back-to-top:hover { background:rgba(62,31,10,0.95); transform:translateY(-2px); }

/* MOBILE button sizing */
@media (max-width:1080px) {
  .lang-btn { font-size:0.6rem; padding:5px 10px; }
  .mobile-menu-btn { font-size:1.25rem; padding:5px 8px; }
  .mobile-top-right { gap:6px; }
}
.scroll-ind { position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; color:rgba(255,255,255,0.5); font-size:0.65rem; letter-spacing:0.2em; text-transform:uppercase; animation:bounce 2s infinite; }
.scroll-ind::after { content:''; width:1px; height:40px; background:linear-gradient(to bottom,rgba(255,255,255,0.4),transparent); }
@keyframes bounce { 0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(6px);} }

/* GALLERY STRIP */
.gallery-strip { display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:1fr 1fr; gap:4px; height:400px; overflow:hidden; }
.gallery-strip img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s; cursor:pointer; }
.gallery-strip img:hover { transform:scale(1.04); }

/* SECTIONS */
section { padding:100px 40px; }
.container { max-width:1180px; margin:0 auto; }
.section-label { font-size:0.65rem; letter-spacing:0.35em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; }
.section-title { font-family:'Cormorant Garamond',serif; font-size:clamp(2rem,4vw,3.2rem); font-weight:300; color:var(--brown-dark); line-height:1.2; margin-bottom:20px; }
.section-title em { font-style:italic; color:var(--brown); }
.section-desc { font-size:0.88rem; line-height:1.9; color:#5A3A22; max-width:560px; }
.divider { width:50px; height:1px; background:var(--gold); margin-bottom:20px; }

/* LESSONS */
#lessons {
  background-color:#F0E8DC;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cline x1='0' y1='0' x2='80' y2='80' stroke='%23C9A85C' stroke-width='0.5' opacity='0.12'/%3E%3Cline x1='80' y1='0' x2='0' y2='80' stroke='%23C9A85C' stroke-width='0.5' opacity='0.1'/%3E%3Ccircle cx='40' cy='40' r='16' fill='none' stroke='%23C9A85C' stroke-width='0.5' opacity='0.1'/%3E%3Ccircle cx='40' cy='40' r='6' fill='none' stroke='%23C9A85C' stroke-width='0.5' opacity='0.08'/%3E%3Ccircle cx='0' cy='0' r='6' fill='none' stroke='%23C9A85C' stroke-width='0.5' opacity='0.08'/%3E%3Ccircle cx='80' cy='0' r='6' fill='none' stroke='%23C9A85C' stroke-width='0.5' opacity='0.08'/%3E%3Ccircle cx='0' cy='80' r='6' fill='none' stroke='%23C9A85C' stroke-width='0.5' opacity='0.08'/%3E%3Ccircle cx='80' cy='80' r='6' fill='none' stroke='%23C9A85C' stroke-width='0.5' opacity='0.08'/%3E%3Crect x='32' y='32' width='16' height='16' fill='none' stroke='%23C9A85C' stroke-width='0.4' opacity='0.07' transform='rotate(45 40 40)'/%3E%3C/svg%3E");
  background-size: 80px 80px;
}
#shop {
  background-color:#EDE4D8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cline x1='0' y1='0' x2='80' y2='80' stroke='%23C9A85C' stroke-width='0.5' opacity='0.1'/%3E%3Cline x1='80' y1='0' x2='0' y2='80' stroke='%23C9A85C' stroke-width='0.5' opacity='0.1'/%3E%3Ccircle cx='40' cy='40' r='14' fill='none' stroke='%23C9A85C' stroke-width='0.5' opacity='0.09'/%3E%3Ccircle cx='40' cy='40' r='6' fill='none' stroke='%23C9A85C' stroke-width='0.5' opacity='0.07'/%3E%3Ccircle cx='0' cy='0' r='6' fill='none' stroke='%23C9A85C' stroke-width='0.5' opacity='0.07'/%3E%3Ccircle cx='80' cy='0' r='6' fill='none' stroke='%23C9A85C' stroke-width='0.5' opacity='0.07'/%3E%3Ccircle cx='0' cy='80' r='6' fill='none' stroke='%23C9A85C' stroke-width='0.5' opacity='0.07'/%3E%3Ccircle cx='80' cy='80' r='6' fill='none' stroke='%23C9A85C' stroke-width='0.5' opacity='0.07'/%3E%3C/svg%3E");
  background-size: 80px 80px;
}
#events {
  background-color:#F7F2EC;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Ctext x='50' y='100' font-size='52' fill='%23C9A85C' opacity='0.07' font-family='serif'%3E%E2%99%AB%3C/text%3E%3Ctext x='280' y='60' font-size='40' fill='%23C9A85C' opacity='0.06' font-family='serif'%3E%E2%99%AA%3C/text%3E%3Ctext x='150' y='200' font-size='48' fill='%23C9A85C' opacity='0.05' font-family='serif'%3E%E2%99%A9%3C/text%3E%3Ctext x='340' y='230' font-size='36' fill='%23C9A85C' opacity='0.07' font-family='serif'%3E%E2%99%AB%3C/text%3E%3Ctext x='20' y='300' font-size='44' fill='%23C9A85C' opacity='0.06' font-family='serif'%3E%E2%99%AA%3C/text%3E%3Ctext x='220' y='370' font-size='50' fill='%23C9A85C' opacity='0.05' font-family='serif'%3E%E2%99%A9%3C/text%3E%3Ctext x='360' y='390' font-size='38' fill='%23C9A85C' opacity='0.06' font-family='serif'%3E%E2%99%AA%3C/text%3E%3C/svg%3E");
  background-size: 400px 400px;
}
#achievements {
  background-color:#F0EAE0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Ctext x='30' y='80' font-size='48' fill='%23C9A85C' opacity='0.07' font-family='serif'%3E%E2%99%AA%3C/text%3E%3Ctext x='200' y='150' font-size='32' fill='%23C9A85C' opacity='0.06' font-family='serif'%3E%E2%99%AB%3C/text%3E%3Ctext x='320' y='60' font-size='56' fill='%23C9A85C' opacity='0.05' font-family='serif'%3E%E2%99%A9%3C/text%3E%3Ctext x='80' y='220' font-size='40' fill='%23C9A85C' opacity='0.06' font-family='serif'%3E%F0%9F%8E%BB%3C/text%3E%3Ctext x='260' y='280' font-size='44' fill='%23C9A85C' opacity='0.07' font-family='serif'%3E%E2%99%AA%3C/text%3E%3Ctext x='140' y='340' font-size='36' fill='%23C9A85C' opacity='0.05' font-family='serif'%3E%E2%99%AB%3C/text%3E%3Ctext x='350' y='360' font-size='52' fill='%23C9A85C' opacity='0.06' font-family='serif'%3E%E2%99%A9%3C/text%3E%3Ctext x='10' y='380' font-size='38' fill='%23C9A85C' opacity='0.05' font-family='serif'%3E%E2%99%AA%3C/text%3E%3C/svg%3E");
  background-size: 400px 400px;
}
.lessons-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:60px; }
@media (max-width:768px) { .lessons-grid { grid-template-columns:1fr; } }
/* lesson card accents below */
.lesson-card::before { content:''; position:absolute; bottom:0; left:0; width:100%; height:3px; background:var(--brown); transform:scaleX(0); transition:transform 0.3s; }
.lesson-card:hover::before { transform:scaleX(1); }
.lesson-card:hover { background-color:#D8CCBA; }
.lesson-icon { font-size:2.5rem; margin-bottom:20px; display:block; }
.lesson-card h3 { font-family:'Cormorant Garamond',serif; font-size:1.6rem; font-weight:400; color:var(--brown-dark); margin-bottom:12px; }
.lesson-card p { font-size:0.82rem; line-height:1.8; color:#6B4A2E; }
.lesson-badge { display:inline-block; margin-top:16px; background:var(--brown); color:var(--cream); font-size:0.62rem; letter-spacing:0.12em; text-transform:uppercase; padding:4px 12px; }

/* Recital wood background */
#recital {
  color:var(--cream);
  background-color: #3E1F0A;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='400'%3E%3Crect width='800' height='400' fill='%233E1F0A'/%3E%3Cpath d='M0,30 Q100,22 180,35 Q300,50 400,28 Q500,10 620,32 Q710,46 800,28' stroke='%235A2E10' stroke-width='1.5' fill='none' opacity='0.6'/%3E%3Cpath d='M0,58 Q80,48 190,62 Q310,78 420,54 Q520,34 640,58 Q730,72 800,54' stroke='%23622E0E' stroke-width='1' fill='none' opacity='0.5'/%3E%3Cpath d='M0,88 Q110,76 220,90 Q350,106 460,82 Q560,60 670,86 Q748,102 800,82' stroke='%234A2210' stroke-width='2' fill='none' opacity='0.4'/%3E%3Cpath d='M0,118 Q90,106 210,120 Q340,136 450,110 Q555,88 660,114 Q745,130 800,112' stroke='%235A2E10' stroke-width='1.2' fill='none' opacity='0.55'/%3E%3Cpath d='M0,150 Q120,138 240,153 Q365,170 470,144 Q572,120 672,148 Q752,164 800,146' stroke='%23622E0E' stroke-width='0.8' fill='none' opacity='0.45'/%3E%3Cpath d='M0,182 Q105,170 225,184 Q348,200 455,175 Q558,152 658,178 Q745,195 800,176' stroke='%234A2210' stroke-width='1.6' fill='none' opacity='0.4'/%3E%3Cpath d='M0,215 Q115,202 235,217 Q358,234 465,208 Q568,184 668,210 Q752,228 800,210' stroke='%235A2E10' stroke-width='1' fill='none' opacity='0.5'/%3E%3Cpath d='M0,248 Q100,235 220,250 Q344,267 452,242 Q555,218 655,244 Q742,262 800,244' stroke='%23622E0E' stroke-width='1.4' fill='none' opacity='0.45'/%3E%3Cpath d='M0,280 Q110,267 230,282 Q354,299 462,274 Q564,250 664,276 Q748,294 800,276' stroke='%234A2210' stroke-width='0.9' fill='none' opacity='0.4'/%3E%3Cpath d='M0,315 Q120,302 240,317 Q364,334 472,308 Q574,284 674,310 Q755,328 800,310' stroke='%235A2E10' stroke-width='1.3' fill='none' opacity='0.5'/%3E%3Cpath d='M0,350 Q105,337 225,352 Q348,369 456,344 Q558,320 658,346 Q744,364 800,346' stroke='%23622E0E' stroke-width='1' fill='none' opacity='0.4'/%3E%3Cpath d='M0,382 Q115,369 235,384 Q358,401 466,376 Q568,352 668,378 Q750,396 800,378' stroke='%234A2210' stroke-width='1.5' fill='none' opacity='0.45'/%3E%3C/svg%3E");
  background-size: 800px 400px;
}
#recital .section-title { color:var(--cream); }
#recital .section-title em {
  background: linear-gradient(135deg, #F5D060 0%, #C9A85C 30%, #FFE87A 55%, #C9A85C 75%, #E8C840 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 6px rgba(201,168,92,0.4));
}
.feature-num {
  font-family:'Cormorant Garamond',serif; font-size:2rem; font-weight:300; line-height:1; min-width:40px;
  background: linear-gradient(135deg, #F5D060 0%, #C9A85C 40%, #FFE87A 60%, #C9A85C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.feature-text h4 {
  font-size:0.75rem; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:4px;
  background: linear-gradient(135deg, #F5D060 0%, #C9A85C 50%, #FFE87A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Darker lesson card background */
.lesson-card:hover { background-color:#D8CCBA; }
#recital .section-desc { color:rgba(248,243,236,0.75); max-width:560px; }

.recital-layout { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.recital-img { width:100%; height:420px; object-fit:cover; border:3px solid rgba(201,168,92,0.3); }
.recital-features { display:flex; flex-direction:column; gap:28px; margin-top:36px; }
.recital-feature { display:flex; gap:16px; align-items:flex-start; }
.feature-text p { font-size:0.82rem; color:rgba(248,243,236,0.7); line-height:1.7; }


/* SHOP */
.shop-layout { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-top:60px; }
.shop-img-block { position:relative; overflow:hidden; height:480px; }
.shop-img-block img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s; }
.shop-img-block:hover img { transform:scale(1.05); }
.shop-overlay-content {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(62,31,10,0.88) 0%, transparent 55%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:28px 24px;
  transition:background 0.3s;
}
.shop-img-block:hover .shop-overlay-content { background:linear-gradient(to top, rgba(62,31,10,0.92) 0%, rgba(62,31,10,0.2) 100%); }
.shop-img-label { font-family:'Cormorant Garamond',serif; font-size:1.6rem; color:#fff; margin-bottom:6px; }
.shop-tap-hint { font-size:0.65rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--gold); opacity:0; transform:translateY(6px); transition:all 0.3s; }
.shop-img-block:hover .shop-tap-hint { opacity:1; transform:translateY(0); }
@media (max-width:768px) { .shop-layout { grid-template-columns:1fr; } .shop-img-block { height:300px; } .shop-tap-hint { opacity:1; transform:none; } }

/* UPCOMING EVENTS */
.events-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; margin-top:60px; }
.event-card { background:var(--cream-dark); padding:36px 30px; border:1px solid rgba(107,62,38,0.1); transition:all 0.3s; position:relative; }
.event-card:hover { background:#EDE0D0; }
.event-card::before { content:''; position:absolute; top:0; left:0; width:100%; height:3px; background:var(--brown); transform:scaleX(0); transition:transform 0.3s; }
.event-card:hover::before { transform:scaleX(1); }
.event-date { font-family:'Cormorant Garamond',serif; font-size:2.8rem; font-weight:300; color:var(--brown); line-height:1; }
.event-month { font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; display:block; }
.event-card h3 { font-family:'Cormorant Garamond',serif; font-size:1.3rem; color:var(--brown-dark); margin-bottom:8px; }
.event-card p { font-size:0.8rem; line-height:1.7; color:#6B4A2E; }
.event-placeholder { opacity:0.4; }
@media (max-width:768px) { .events-grid { grid-template-columns:1fr; } }
#about {
  background-color:#F2EBE0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cline x1='0' y1='0' x2='120' y2='120' stroke='%23C9A85C' stroke-width='0.5' opacity='0.12'/%3E%3Cline x1='120' y1='0' x2='0' y2='120' stroke='%23C9A85C' stroke-width='0.5' opacity='0.08'/%3E%3Crect x='52' y='52' width='16' height='16' fill='none' stroke='%23C9A85C' stroke-width='0.6' opacity='0.1' transform='rotate(45 60 60)'/%3E%3Crect x='44' y='44' width='32' height='32' fill='none' stroke='%23C9A85C' stroke-width='0.4' opacity='0.07' transform='rotate(45 60 60)'/%3E%3C/svg%3E");
  background-size: 120px 120px;
}
.about-layout { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.about-imgs { display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.about-imgs img { width:100%; height:220px; object-fit:cover; }
.about-imgs img:first-child { grid-column:span 2; height:260px; }
.about-text { padding-top:10px; }
.awards-row { display:flex; gap:20px; margin-top:30px; flex-wrap:wrap; }

/* CONTACT */
#contact {
  color:var(--cream);
  background-color: #2A1005;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='400'%3E%3Crect width='800' height='400' fill='%232A1005'/%3E%3Cpath d='M0,30 Q120,22 200,34 Q320,48 420,28 Q520,10 640,32 Q720,44 800,28' stroke='%23421808' stroke-width='1.2' fill='none' opacity='0.65'/%3E%3Cpath d='M0,65 Q90,56 200,68 Q330,80 440,60 Q545,42 660,64 Q740,76 800,60' stroke='%23501C0A' stroke-width='0.9' fill='none' opacity='0.55'/%3E%3Cpath d='M0,100 Q110,90 230,102 Q355,115 460,96 Q562,78 665,100 Q748,113 800,96' stroke='%23421808' stroke-width='1.5' fill='none' opacity='0.5'/%3E%3Cpath d='M0,136 Q100,126 220,138 Q345,151 452,132 Q555,114 658,136 Q742,149 800,132' stroke='%23501C0A' stroke-width='1' fill='none' opacity='0.55'/%3E%3Cpath d='M0,172 Q115,162 235,174 Q358,187 466,168 Q568,150 668,172 Q750,186 800,168' stroke='%23421808' stroke-width='1.3' fill='none' opacity='0.48'/%3E%3Cpath d='M0,208 Q105,198 225,210 Q348,223 456,204 Q558,186 658,208 Q744,221 800,204' stroke='%23501C0A' stroke-width='0.8' fill='none' opacity='0.52'/%3E%3Cpath d='M0,244 Q120,234 240,246 Q364,259 472,240 Q574,222 674,244 Q754,257 800,240' stroke='%23421808' stroke-width='1.1' fill='none' opacity='0.48'/%3E%3Cpath d='M0,280 Q110,270 230,282 Q354,295 462,276 Q564,258 664,280 Q748,293 800,276' stroke='%23501C0A' stroke-width='1.2' fill='none' opacity='0.5'/%3E%3Cpath d='M0,316 Q105,306 225,318 Q348,331 456,312 Q558,294 658,316 Q744,329 800,312' stroke='%23421808' stroke-width='0.9' fill='none' opacity='0.45'/%3E%3Cpath d='M0,352 Q120,342 240,354 Q364,367 472,348 Q574,330 674,352 Q754,365 800,348' stroke='%23501C0A' stroke-width='1.3' fill='none' opacity='0.5'/%3E%3Cpath d='M0,385 Q110,375 230,387 Q354,400 462,381 Q564,363 664,385 Q748,398 800,381' stroke='%23421808' stroke-width='0.8' fill='none' opacity='0.45'/%3E%3C/svg%3E");
  background-size: 800px 400px;
}
#contact .section-title { color:var(--cream); }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; margin-top:60px; }
.contact-info { display:flex; flex-direction:column; gap:24px; }
.contact-item { display:flex; gap:16px; }
.contact-icon { font-size:1.2rem; margin-top:2px; }
.contact-item h4 { font-size:0.68rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--gold); margin-bottom:4px; }
.contact-item p { font-size:0.85rem; color:rgba(248,243,236,0.8); line-height:1.6; }
.map-wrapper { width:100%; height:320px; overflow:hidden; border:1px solid rgba(201,168,92,0.2); }
.map-wrapper iframe { width:100%; height:100%; border:none; }
.wa-btn { display:inline-flex; align-items:center; gap:10px; background:#25D366; color:#fff; padding:14px 28px; text-decoration:none; font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; margin-top:24px; transition:background 0.2s; font-family:'Josefin Sans',sans-serif; }
.wa-btn:hover { background:#1ebe59; }
.wa-btn svg { width:18px; height:18px; fill:#fff; flex-shrink:0; }

/* FOOTER */
footer {
  padding:48px 40px 28px; border-top:1px solid rgba(201,168,92,0.3);
  background-color: #2A1005;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='200'%3E%3Crect width='800' height='200' fill='%232A1005'/%3E%3Cpath d='M0,20 Q120,14 200,22 Q320,32 420,18 Q520,6 640,22 Q720,30 800,18' stroke='%23421808' stroke-width='1.2' fill='none' opacity='0.7'/%3E%3Cpath d='M0,45 Q90,38 200,46 Q330,56 440,40 Q545,26 660,44 Q740,54 800,40' stroke='%23501C0A' stroke-width='0.9' fill='none' opacity='0.6'/%3E%3Cpath d='M0,72 Q110,64 230,74 Q355,85 460,68 Q562,52 665,70 Q748,80 800,66' stroke='%23421808' stroke-width='1.5' fill='none' opacity='0.55'/%3E%3Cpath d='M0,100 Q100,92 220,102 Q345,114 452,96 Q555,80 658,100 Q742,112 800,96' stroke='%23501C0A' stroke-width='1' fill='none' opacity='0.6'/%3E%3Cpath d='M0,128 Q115,120 235,130 Q358,142 466,124 Q568,108 668,128 Q750,140 800,124' stroke='%23421808' stroke-width='1.3' fill='none' opacity='0.5'/%3E%3Cpath d='M0,156 Q105,148 225,158 Q348,170 456,152 Q558,136 658,156 Q744,168 800,152' stroke='%23501C0A' stroke-width='0.8' fill='none' opacity='0.55'/%3E%3Cpath d='M0,182 Q120,174 240,184 Q364,196 472,178 Q574,162 674,182 Q754,194 800,178' stroke='%23421808' stroke-width='1.1' fill='none' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 800px 200px;
}
.footer-inner { max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px; padding-bottom:28px; border-bottom:1px solid rgba(201,168,92,0.1); }
.footer-logo img { height:36px; filter:invert(1) brightness(2); opacity:0.85; }
.footer-copy { max-width:1180px; margin:20px auto 0; text-align:center; font-size:0.68rem; color:rgba(248,243,236,0.3); letter-spacing:0.1em; }
.social-links { display:flex; gap:14px; }
.social-links a { width:36px; height:36px; border:1px solid rgba(201,168,92,0.3); display:flex; align-items:center; justify-content:center; color:rgba(248,243,236,0.6); text-decoration:none; font-size:0.85rem; transition:all 0.2s; }
.social-links a:hover { border-color:var(--gold); color:var(--gold); }

/* MOBILE RESPONSIVE */
@media (max-width:768px) {
  section { padding:70px 20px; }
  .lessons-grid, .recital-layout, .about-layout, .contact-grid, .shop-layout { grid-template-columns:1fr; }
  .gallery-strip { grid-template-columns:1fr 1fr; height:200px; }
  .recital-img, .shop-img-block { height:260px; }
  .about-imgs img { height:160px; }
  .about-imgs img:first-child { height:200px; }
}

/* LANGUAGE */
[data-zh] { display:none; }
body.zh [data-en] { display:none; }
body.zh [data-zh] { display:block; }
body.zh span[data-zh] { display:inline; }
body.zh span[data-en] { display:none; }

/* MODAL */
.modal-overlay {
  display:none; position:fixed; inset:0; z-index:2000;
  background:rgba(30,10,0,0.75); backdrop-filter:blur(4px);
  align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.open { display:flex; }
.modal-box {
  background-color: #E5D9C8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='600'%3E%3Crect width='400' height='600' fill='%23E5D9C8'/%3E%3Cpath d='M0,25 Q80,20 160,26 Q240,33 320,24 Q370,19 400,25' stroke='%23C8B090' stroke-width='0.8' fill='none' opacity='0.5'/%3E%3Cpath d='M0,55 Q70,49 150,56 Q230,63 310,53 Q360,47 400,55' stroke='%23BEA47E' stroke-width='0.6' fill='none' opacity='0.4'/%3E%3Cpath d='M0,88 Q90,82 170,89 Q260,97 340,86 Q375,81 400,88' stroke='%23C8B090' stroke-width='1' fill='none' opacity='0.45'/%3E%3Cpath d='M0,122 Q75,116 155,123 Q235,131 315,120 Q362,114 400,122' stroke='%23BEA47E' stroke-width='0.7' fill='none' opacity='0.4'/%3E%3Cpath d='M0,158 Q85,152 165,159 Q248,167 328,156 Q368,151 400,158' stroke='%23C8B090' stroke-width='0.9' fill='none' opacity='0.45'/%3E%3Cpath d='M0,194 Q78,188 158,195 Q240,203 320,192 Q365,187 400,194' stroke='%23BEA47E' stroke-width='0.6' fill='none' opacity='0.38'/%3E%3Cpath d='M0,230 Q88,224 168,231 Q252,239 332,228 Q370,223 400,230' stroke='%23C8B090' stroke-width='0.8' fill='none' opacity='0.42'/%3E%3Cpath d='M0,268 Q82,262 162,269 Q244,277 324,266 Q367,261 400,268' stroke='%23BEA47E' stroke-width='0.7' fill='none' opacity='0.38'/%3E%3Cpath d='M0,305 Q86,299 166,306 Q250,314 330,303 Q368,298 400,305' stroke='%23C8B090' stroke-width='0.9' fill='none' opacity='0.4'/%3E%3Cpath d='M0,342 Q80,336 160,343 Q244,351 324,340 Q366,335 400,342' stroke='%23BEA47E' stroke-width='0.6' fill='none' opacity='0.38'/%3E%3Cpath d='M0,380 Q84,374 164,381 Q248,389 328,378 Q367,373 400,380' stroke='%23C8B090' stroke-width='0.8' fill='none' opacity='0.42'/%3E%3Cpath d='M0,418 Q78,412 158,419 Q242,427 322,416 Q365,411 400,418' stroke='%23BEA47E' stroke-width='0.7' fill='none' opacity='0.38'/%3E%3Cpath d='M0,456 Q86,450 166,457 Q250,465 330,454 Q368,449 400,456' stroke='%23C8B090' stroke-width='0.9' fill='none' opacity='0.4'/%3E%3C/svg%3E");
  background-size: 400px 600px;
  max-width:560px; width:100%;
  padding:48px 44px; position:relative;
  animation:modalIn 0.3s ease;
  max-height:90vh; overflow-y:auto;
}
@keyframes modalIn { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }
.modal-close {
  position:absolute; top:16px; right:20px;
  background:none; border:none; font-size:1.5rem; cursor:pointer;
  color:var(--brown); line-height:1;
}
.modal-close:hover { color:var(--brown-dark); }
.modal-icon { font-size:2.8rem; margin-bottom:12px; display:block; }
.modal-title { font-family:'Cormorant Garamond',serif; font-size:2rem; font-weight:400; color:var(--brown-dark); margin-bottom:6px; }
.modal-subtitle { font-size:0.7rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--gold); margin-bottom:20px; }
.modal-divider { width:40px; height:1px; background:var(--gold); margin-bottom:20px; }
.modal-desc { font-size:0.85rem; line-height:1.9; color:#5A3A22; margin-bottom:20px; }
.modal-features { display:flex; flex-direction:column; gap:8px; margin-bottom:28px; }
.modal-feature { display:flex; align-items:center; gap:10px; font-size:0.82rem; color:var(--brown-dark); }
.modal-feature::before { content:'♩'; color:var(--gold); font-size:1rem; }
.modal-cta {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--brown); color:var(--cream);
  padding:12px 26px; text-decoration:none;
  font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase;
  font-family:'Josefin Sans',sans-serif; transition:background 0.2s;
}
.modal-cta:hover { background:var(--brown-dark); }
.modal-cta svg { width:16px; height:16px; fill:#fff; }
/* LESSON CARD ACCENTS */
.lesson-card { cursor:pointer; position:relative; }
.lesson-card:nth-child(1) { border-top:4px solid #D4C5A9; } /* Piano - cream */
.lesson-card:nth-child(2) { border-top:4px solid #8B5E3C; } /* Violin - same as cello */
.lesson-card:nth-child(3) { border-top:4px solid #3E1F0A; } /* Cello - dark red */
.lesson-card:nth-child(4) { border-top:4px solid #1A3A5C; } /* Singing - dark blue */
.lesson-card:nth-child(5) { border-top:4px solid #C4622D; } /* Percussion - burnt orange */
.lesson-card:nth-child(6) { border-top:4px solid #6B1A1A; } /* Marimba - terracotta */
.lesson-card:nth-child(1) .lesson-icon { color:#D4C5A9; }
.lesson-card:nth-child(2) .lesson-icon { color:#8B5E3C; }
.lesson-card:nth-child(3) .lesson-icon { color:#3E1F0A; }
.lesson-card:nth-child(4) .lesson-icon { color:#1A3A5C; }
.lesson-card:nth-child(5) .lesson-icon { color:#C4622D; }
.lesson-card:nth-child(6) .lesson-icon { color:#6B1A1A; }
.lesson-card:nth-child(1) .lesson-badge { background:#D4C5A9; color:#3E1F0A; }
.lesson-card:nth-child(2) .lesson-badge { background:#8B5E3C; }
.lesson-card:nth-child(3) .lesson-badge { background:#3E1F0A; }
.lesson-card:nth-child(4) .lesson-badge { background:#1A3A5C; }
.lesson-card:nth-child(5) .lesson-badge { background:#C4622D; }
.lesson-card:nth-child(6) .lesson-badge { background:#6B1A1A; }
.lesson-card:nth-child(1)::before { background:#D4C5A9; }
.lesson-card:nth-child(2)::before { background:#8B5E3C; }
.lesson-card:nth-child(3)::before { background:#3E1F0A; }
.lesson-card:nth-child(4)::before { background:#1A3A5C; }
.lesson-card:nth-child(5)::before { background:#C4622D; }
.lesson-card:nth-child(7) { border-top:4px solid #1A1008; } /* Music Theory - grey */
.lesson-card:nth-child(7) .lesson-icon { color:#1A1008; }
.lesson-card:nth-child(7) .lesson-badge { background:#1A1008; }
.lesson-card:nth-child(7)::before { background:#1A1008; }

/* CAROUSEL */
.carousel-section {
  overflow:hidden; padding:20px 0; position:relative;
  background-color: #8B6343;
  background-image:
    repeating-linear-gradient(92deg, transparent 0px, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 3px),
    repeating-linear-gradient(88deg, transparent 0px, transparent 8px, rgba(255,255,255,0.04) 8px, rgba(255,255,255,0.04) 10px),
    repeating-linear-gradient(91deg, transparent 0px, transparent 18px, rgba(0,0,0,0.04) 18px, rgba(0,0,0,0.04) 20px),
    linear-gradient(180deg, #7A5230 0%, #96703E 15%, #8B6040 30%, #A07848 45%, #8B6040 55%, #7A5230 70%, #96703E 85%, #8B6040 100%);
}
.carousel-viewport { position:relative; width:100%; display:flex; align-items:center; justify-content:center; height:300px; overflow:hidden; }
.carousel-slide {
  position:absolute; height:270px; width:min(480px, 55vw); object-fit:cover;
  transition:all 0.8s cubic-bezier(0.4,0,0.2,1);
  border-radius:2px; flex-shrink:0;
}
.carousel-slide.center { transform:translateX(0) scale(1); opacity:1; z-index:3; }
.carousel-slide.left  { transform:translateX(calc(-1 * min(440px,52vw))) scale(0.85); opacity:0.4; z-index:2; }
.carousel-slide.right { transform:translateX(calc(min(440px,52vw))) scale(0.85); opacity:0.4; z-index:2; }
.carousel-slide.far-left  { transform:translateX(calc(-2 * min(440px,52vw))) scale(0.7); opacity:0; z-index:1; }
.carousel-slide.far-right { transform:translateX(calc(2 * min(440px,52vw))) scale(0.7); opacity:0; z-index:1; }
@media (max-width:768px) {
  .carousel-viewport { height:200px; }
  .carousel-slide { height:178px; width:min(260px, 70vw); }
}

/* ACHIEVEMENTS */
.achievements-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:3px; margin-top:60px; }
.achievement-card { position:relative; overflow:hidden; aspect-ratio:3/4; background:var(--cream); }
.achievement-card img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s; }
.achievement-card:hover img { transform:scale(1.05); }
.achievement-placeholder {
  width:100%; height:100%; min-height:280px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; background:var(--cream); border:2px dashed rgba(107,62,38,0.2);
}
.achievement-placeholder span { font-size:2.5rem; }
.achievement-placeholder p { font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; color:rgba(107,62,38,0.4); }
@media (max-width:768px) { .achievements-grid { grid-template-columns:1fr 1fr; } }

/* FADE IN */
.fade-in { opacity:0; transform:translateY(24px); transition:opacity 0.7s ease,transform 0.7s ease; }
.fade-in.visible { opacity:1; transform:translateY(0); }

/* ── RESPONSIVE IMPROVEMENTS ── */

/* Prevent horizontal bleed on all screens */
html, body { overflow-x:hidden; }

/* iPad / tablet  769px – 1024px */
@media (max-width:1024px) and (min-width:769px) {
  section { padding:80px 28px; }
  .lessons-grid { grid-template-columns:repeat(2,1fr); }
  .events-grid  { grid-template-columns:repeat(2,1fr); }
  .achievements-grid { grid-template-columns:repeat(2,1fr); }
  .recital-layout { gap:44px; }
  .contact-grid   { gap:36px; }
}

/* Phones  ≤600px */
@media (max-width:600px) {
  section { padding:56px 16px; }
  footer  { padding:36px 16px 20px; }
  .footer-inner { gap:16px; }
  .hero-sub { font-size:0.72rem; letter-spacing:0.07em; }
  .hero-btns { flex-direction:column; align-items:center; gap:12px; }
  .btn-primary { width:100%; max-width:300px; padding:14px 20px; text-align:center; }
  .btn-outline  { width:100%; max-width:300px; padding:14px 20px; text-align:center; justify-content:center; }
  .wa-btn { width:100%; justify-content:center; }
  .modal-box { padding:32px 20px; }
  .lesson-card { padding:36px 20px; }
  .event-card  { padding:28px 20px; }
  .awards-row  { gap:12px; }
  .award-badge { padding:10px 14px; }
  .award-badge .num { font-size:1.6rem; }
  .contact-grid { gap:36px; }
  .map-wrapper  { height:240px; }
  .recital-img  { height:220px; }
}

/* Very small phones  ≤380px */
@media (max-width:380px) {
  section { padding:44px 14px; }
  .section-title { font-size:clamp(1.5rem,8.5vw,2.2rem); }
  .hero h1  { font-size:clamp(1.9rem,9vw,2.8rem); }
  .hero-sub { letter-spacing:0.04em; }
  .modal-box { padding:24px 14px; }
  .achievements-grid { grid-template-columns:1fr 1fr; }
  .lesson-card { padding:28px 16px; }
}

/* ── Added 2026-11-09: Log in button + "Website by KalamCH" (in the site's own wood style) ── */
/* Log in button — same wood as the 中文 button */
nav a.login-btn, nav a.login-btn:hover {
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  color:#F5E6CC; padding:5px 12px; border-radius:3px; white-space:nowrap;
  font-family:'Josefin Sans',sans-serif; font-size:0.63rem; font-weight:400; letter-spacing:0.1em; text-transform:uppercase;
  background-color:#5A2E10; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='30'%3E%3Crect width='200' height='30' fill='%235A2E10'/%3E%3Cpath d='M0,6 Q40,4 80,7 Q120,10 160,6 Q180,4 200,6' stroke='%23762E10' stroke-width='0.8' fill='none' opacity='0.6'/%3E%3Cpath d='M0,14 Q35,12 75,15 Q115,18 155,13 Q178,11 200,14' stroke='%23622E0E' stroke-width='1' fill='none' opacity='0.5'/%3E%3Cpath d='M0,22 Q45,20 85,23 Q125,26 165,21 Q182,19 200,22' stroke='%23762E10' stroke-width='0.7' fill='none' opacity='0.55'/%3E%3C/svg%3E"); background-size:200px 30px;
  border-bottom:none; transition:filter 0.2s;
}
nav a.login-btn:hover { filter:brightness(1.2); }
nav a.login-btn::after { display:none; }
nav a.login-btn svg { width:12px; height:12px; fill:currentColor; flex-shrink:0; }
body.zh nav a.login-btn { letter-spacing:0.04em; font-size:0.7rem; }
.nav-links .login-btn { margin-left:2px; }
.mobile-nav-end { display:flex; align-items:center; gap:10px; }
.mobile-nav .mobile-nav-end a.login-btn { padding:7px 12px; }
.mobile-nav.open { max-height:640px; }
@media (max-width:1080px) { nav a.login-btn { font-size:0.6rem; padding:5px 10px; } }
@media (max-width:600px)  { .mobile-top-right a.login-btn { font-size:0.56rem; letter-spacing:0.08em; padding:7px 10px; } }
@media (max-width:435px)  {
  .mobile-top-right a.login-btn { padding:5px 7px; }
  .mobile-top-right a.login-btn span { display:none !important; }
  .mobile-top-right a.login-btn svg { width:14px; height:14px; }
}

/* "Website by KalamCH" */
.footer-made { max-width:1180px; margin:8px auto 0; text-align:center; font-size:0.78rem; letter-spacing:0.06em; color:rgba(248,243,236,0.5); }
.footer-made a { color:#F5E6CC; font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; text-decoration-color:rgba(201,168,92,0.7); transition:color .2s; }
.footer-made a:hover { color:var(--gold); }

/* App section */
#app { background-color:var(--cream-dark); }
.app-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px 48px; align-items:start; }
.app-btns { display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.app-btn-dark, .app-btn-light {
  display:inline-block; padding:15px 32px; text-decoration:none; text-align:center;
  font-family:'Josefin Sans',sans-serif; font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; transition:all 0.3s;
}
.app-btn-dark {
  color:var(--cream); background:linear-gradient(135deg, #6B3515 0%, #8B4A1A 45%, #5A2E10 100%);
  border:1px solid rgba(201,168,92,0.45); box-shadow:0 4px 20px rgba(62,31,10,0.25), inset 0 1px 0 rgba(255,220,150,0.2);
}
.app-btn-dark:hover { transform:translateY(-1px); box-shadow:0 6px 28px rgba(62,31,10,0.4), inset 0 1px 0 rgba(255,220,150,0.3); }
.app-btn-light { color:var(--brown-dark); border:1px solid rgba(107,62,38,0.35); }
.app-btn-light:hover { background:rgba(107,62,38,0.07); transform:translateY(-1px); }
body.zh .app-btn-dark, body.zh .app-btn-light { letter-spacing:0.08em; font-size:0.8rem; }
.app-note { margin-top:18px; font-size:0.78rem; line-height:1.8; color:#8B6A4E; }
.app-features { display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.app-feature {
  background-color:#E5D9C8; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300'%3E%3Crect width='400' height='300' fill='%23E5D9C8'/%3E%3Cpath d='M0,18 Q60,12 120,20 Q200,30 280,16 Q340,8 400,18' stroke='%23B89A6A' stroke-width='1' fill='none' opacity='0.25'/%3E%3Cpath d='M0,38 Q70,30 140,40 Q220,51 300,36 Q360,26 400,38' stroke='%23A8845A' stroke-width='0.7' fill='none' opacity='0.2'/%3E%3Cpath d='M0,62 Q55,54 115,64 Q195,76 275,60 Q345,48 400,62' stroke='%23B89A6A' stroke-width='1.2' fill='none' opacity='0.23'/%3E%3Cpath d='M0,88 Q65,80 130,90 Q210,102 290,86 Q352,74 400,88' stroke='%23A8845A' stroke-width='0.8' fill='none' opacity='0.19'/%3E%3Cpath d='M0,115 Q60,106 125,117 Q205,130 285,113 Q348,100 400,115' stroke='%23B89A6A' stroke-width='1.1' fill='none' opacity='0.23'/%3E%3Cpath d='M0,144 Q68,135 135,146 Q215,158 295,142 Q355,130 400,144' stroke='%23A8845A' stroke-width='0.7' fill='none' opacity='0.19'/%3E%3Cpath d='M0,174 Q58,165 118,176 Q198,188 278,172 Q342,160 400,174' stroke='%23B89A6A' stroke-width='1.3' fill='none' opacity='0.22'/%3E%3Cpath d='M0,205 Q64,196 128,207 Q208,220 288,204 Q350,192 400,205' stroke='%23A8845A' stroke-width='0.8' fill='none' opacity='0.19'/%3E%3Cpath d='M0,236 Q62,227 124,238 Q204,251 284,235 Q348,223 400,236' stroke='%23B89A6A' stroke-width='1' fill='none' opacity='0.21'/%3E%3Cpath d='M0,268 Q66,259 130,270 Q210,283 290,267 Q352,255 400,268' stroke='%23A8845A' stroke-width='0.7' fill='none' opacity='0.18'/%3E%3Cpath d='M0,292 Q60,284 120,294 Q200,306 280,290 Q344,278 400,292' stroke='%23B89A6A' stroke-width='1.1' fill='none' opacity='0.2'/%3E%3C/svg%3E"); background-size:400px 300px;
  border:1px solid rgba(107,62,38,0.12); padding:28px 24px; position:relative;
}
.app-feature::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--brown); }
.app-feature:nth-child(2)::before { background:#C9A85C; }
.app-feature:nth-child(3)::before { background:#8B4A1A; }
.app-feature:nth-child(4)::before { background:#3E1F0A; }
.app-ic { display:block; font-size:1.9rem; margin-bottom:12px; line-height:1; }
.app-shot { display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:left top; margin-bottom:18px; border-radius:6px; border:1px solid rgba(107,62,38,0.18); box-shadow:0 8px 22px rgba(62,31,10,0.14); background:#F2EBE0; }
.app-feature h3 { font-family:'Cormorant Garamond',serif; font-size:1.45rem; font-weight:400; color:var(--brown-dark); margin-bottom:8px; line-height:1.2; }
.app-feature p { font-size:0.8rem; line-height:1.8; color:#6B4A2E; }
.app-steps {
  grid-column:1 / -1; color:var(--cream); padding:40px 40px 44px;
  background-color:#3E1F0A; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='400'%3E%3Crect width='800' height='400' fill='%233E1F0A'/%3E%3Cpath d='M0,30 Q100,22 180,35 Q300,50 400,28 Q500,10 620,32 Q710,46 800,28' stroke='%235A2E10' stroke-width='1.5' fill='none' opacity='0.6'/%3E%3Cpath d='M0,58 Q80,48 190,62 Q310,78 420,54 Q520,34 640,58 Q730,72 800,54' stroke='%23622E0E' stroke-width='1' fill='none' opacity='0.5'/%3E%3Cpath d='M0,88 Q110,76 220,90 Q350,106 460,82 Q560,60 670,86 Q748,102 800,82' stroke='%234A2210' stroke-width='2' fill='none' opacity='0.4'/%3E%3Cpath d='M0,118 Q90,106 210,120 Q340,136 450,110 Q555,88 660,114 Q745,130 800,112' stroke='%235A2E10' stroke-width='1.2' fill='none' opacity='0.55'/%3E%3Cpath d='M0,150 Q120,138 240,153 Q365,170 470,144 Q572,120 672,148 Q752,164 800,146' stroke='%23622E0E' stroke-width='0.8' fill='none' opacity='0.45'/%3E%3Cpath d='M0,182 Q105,170 225,184 Q348,200 455,175 Q558,152 658,178 Q745,195 800,176' stroke='%234A2210' stroke-width='1.6' fill='none' opacity='0.4'/%3E%3Cpath d='M0,215 Q115,202 235,217 Q358,234 465,208 Q568,184 668,210 Q752,228 800,210' stroke='%235A2E10' stroke-width='1' fill='none' opacity='0.5'/%3E%3Cpath d='M0,248 Q100,235 220,250 Q344,267 452,242 Q555,218 655,244 Q742,262 800,244' stroke='%23622E0E' stroke-width='1.4' fill='none' opacity='0.45'/%3E%3Cpath d='M0,280 Q110,267 230,282 Q354,299 462,274 Q564,250 664,276 Q748,294 800,276' stroke='%234A2210' stroke-width='0.9' fill='none' opacity='0.4'/%3E%3Cpath d='M0,315 Q120,302 240,317 Q364,334 472,308 Q574,284 674,310 Q755,328 800,310' stroke='%235A2E10' stroke-width='1.3' fill='none' opacity='0.5'/%3E%3Cpath d='M0,350 Q105,337 225,352 Q348,369 456,344 Q558,320 658,346 Q744,364 800,346' stroke='%23622E0E' stroke-width='1' fill='none' opacity='0.4'/%3E%3Cpath d='M0,382 Q115,369 235,384 Q358,401 466,376 Q568,352 668,378 Q750,396 800,378' stroke='%234A2210' stroke-width='1.5' fill='none' opacity='0.45'/%3E%3C/svg%3E"); background-size:800px 400px;
  border:1px solid rgba(201,168,92,0.3);
}
.app-steps-title { font-family:'Cormorant Garamond',serif; font-size:2rem; font-weight:300; margin-bottom:24px; color:var(--cream); }
.app-steps ol { list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; }
.app-steps ol { gap:18px; }
.app-steps li { display:flex; flex-direction:column; gap:0; padding:26px 22px 24px; border:1px solid rgba(201,168,92,0.32); background:rgba(248,243,236,0.045); box-shadow:inset 0 1px 0 rgba(248,243,236,0.06); transition:border-color .3s, background .3s; }
.app-steps li:hover { border-color:rgba(201,168,92,0.6); background:rgba(248,243,236,0.07); }
.app-steps li > b { font-family:'Cormorant Garamond',serif; font-size:2.4rem; font-weight:300; color:var(--gold); line-height:1; padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid rgba(201,168,92,0.35); width:44px; }
.app-steps h4 { font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; font-weight:600; color:var(--gold); margin:0 0 10px; line-height:1.5; }
body.zh .app-steps h4 { letter-spacing:0.05em; font-size:0.85rem; }
.app-steps p { font-size:0.78rem; line-height:1.8; color:rgba(248,243,236,0.72); }
@media (max-width:1000px) {
  .app-grid { grid-template-columns:1fr; gap:32px; }
  .app-steps ol { grid-template-columns:1fr 1fr; }
}
@media (max-width:600px) {
  .app-features { grid-template-columns:1fr; }
  .app-steps { padding:30px 22px 32px; }
  .app-steps ol { grid-template-columns:1fr; gap:20px; }
  .app-btns { flex-direction:column; }
  .app-btn-dark, .app-btn-light { width:100%; }
}

/* ── Header (2026-11-09): one tidy line at every width ───────────────────
   Buttons never squeeze or wrap, Log in and 中文 match, and the menu keeps
   spare room; on smaller laptops it drops the duplicate social icons
   (they are in the footer and contact) and shows Log in as an icon. */
@media (min-width:1001px) {
  .nav-links > * { flex-shrink:0; }
  .nav-links { gap:clamp(6px, 1.4vw - 8px, 13px); }
  .nav-links .nav-social { margin-left:2px; margin-right:0; }
  nav .nav-links a.login-btn, nav .nav-links .lang-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    height:28px; padding:0 12px; line-height:1; white-space:nowrap; box-sizing:border-box;
    font-size:0.63rem; letter-spacing:0.1em; border-radius:3px;
  }
  nav .nav-links .lang-btn { min-width:46px; }
  body.zh nav .nav-links a.login-btn { font-size:0.7rem; letter-spacing:0.04em; }
}
@media (min-width:1001px) { body:not(.zh) .nav-links .nav-social { display:none; } }
@media (min-width:1001px) and (max-width:1199px), (min-width:1201px) and (max-width:1279px) {
  body:not(.zh) nav .nav-links a.login-btn { width:32px; padding:0; }
  body:not(.zh) nav .nav-links a.login-btn span { display:none !important; }
  nav .nav-links a.login-btn svg { width:13px; height:13px; }
}