:root{--ink:#111;--cream:#f8f5ee;--paper:#fffaf1;--gold:#b79b65;--red:#bd2c22;--muted:#776e62}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:'Noto Serif TC',serif}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.site-header{z-index:20;position:absolute;z-index:10;top:0;left:0;right:0;height:92px;display:flex;align-items:center;padding:20px 6vw;gap:32px}.brand img{width:150px}.desktop-nav{margin-left:auto;display:flex;gap:34px;align-items:flex-start;font-size:15px;font-weight:600}.desktop-nav a{text-align:center}.desktop-nav span{display:block;font-family:Cinzel,serif;font-size:9px;color:#5f584f;margin-top:3px}.desktop-nav a:first-child{color:#9a7d43}.lang{font-size:13px;margin-left:20px}.menu-btn{display:none;background:none;border:0;font-size:26px}.mobile-menu{display:none}.hero{min-height:680px;height:76vh;position:relative;display:grid;place-items:center;overflow:hidden;background:#f5f1e9}.ink{position:absolute;filter:none;opacity:.98}.ink-left{left:-7vw;bottom:-8vh;width:min(58vw,740px);height:min(74vh,560px);background:url('images/hero-left-ink-v42.png') left bottom/100% 100% no-repeat;opacity:1;z-index:0;filter:none;-webkit-mask-image:linear-gradient(to right,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 66%,rgba(0,0,0,.75) 82%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(to right,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 66%,rgba(0,0,0,.75) 82%,rgba(0,0,0,0) 100%)}.ink-right{background:url('images/hero-right-ink.png') right top/contain no-repeat;opacity:1;z-index:0;filter:none;right:-9vw;top:-4vh;width:min(68vw,940px);height:min(108vh,860px);-webkit-mask-image:linear-gradient(to left,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 56%,rgba(0,0,0,.9) 72%,rgba(0,0,0,.58) 88%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(to left,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 56%,rgba(0,0,0,.9) 72%,rgba(0,0,0,.58) 88%,rgba(0,0,0,0) 100%)}.hero-photo{display:none}.hero-content{text-align:center;position:relative;z-index:2;padding-top:22px;max-width:min(760px,88vw)}.hero-logo{width:min(490px,54vw);margin:0 auto 22px}.hero-tagline{font-size:26px;letter-spacing:.14em;margin:0 0 10px}.hero-en{font-family:Cinzel,serif;color:#9a6c28;font-size:18px;margin:0 0 28px}.hero-actions{display:flex;justify-content:center;gap:22px}.btn{display:inline-flex;min-width:150px;height:56px;padding:0 28px;align-items:center;justify-content:center;flex-direction:column;border:1px solid #2e2a25;font-size:15px;font-weight:600;letter-spacing:.08em}.btn span{font-family:Cinzel,serif;font-size:10px;letter-spacing:.08em;margin-top:2px}.btn-dark{background:#0e0e0d;color:#fff}.btn-light{background:rgba(255,250,241,.68)}.btn-outline{color:#dfc995;border-color:var(--gold);margin:34px auto 0}.scroll-hint{position:absolute;bottom:35px;left:50%;transform:translateX(-50%);font-family:Cinzel,serif;font-size:10px;text-align:center;color:#403a32}.scroll-hint i{display:block;width:12px;height:18px;margin:7px auto 0;background:var(--red)}.panel-dark{background:#0b0b0a;color:#eee;background-image:radial-gradient(ellipse at 0 0,rgba(255,255,255,.13),transparent 38%),radial-gradient(ellipse at 100% 100%,rgba(183,155,101,.18),transparent 42%)}.section-title{display:flex;align-items:center;justify-content:center;gap:26px;text-align:center;margin-bottom:34px}.section-title span{width:82px;height:1px;background:var(--gold)}.section-title h2{font-size:28px;letter-spacing:.28em;margin:0 0 4px}.section-title p{font-family:Cinzel,serif;font-size:12px;letter-spacing:.08em;margin:0;color:#7d6945}.section-title.inverse h2{color:#e7d5af}.section-title.inverse p{color:#d2bd89}.collabs{padding:34px 6vw 42px}.brand-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:18px;align-items:center;text-align:center;max-width:1160px;margin:0 auto}.brand-grid div{font-family:Cinzel,serif;font-size:24px;color:#f5f0e7;opacity:.9;min-height:46px;display:grid;place-items:center}.works{padding:50px 6vw 56px;background:#fbf6ee}.work-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:22px}.work-card{text-align:center}.work-card img{width:100%;aspect-ratio:1.38/1;object-fit:cover;border:1px solid rgba(80,60,38,.16)}.work-card h3{font-size:16px;margin:18px 0 2px}.work-card p{font-family:Cinzel,serif;font-size:11px;margin:0 0 8px}.work-card a{font-family:Cinzel,serif;font-size:10px}.services{padding:48px 6vw 58px;text-align:center}.service-grid{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:30px 28px}.service-grid div:before{content:'✦';display:block;color:var(--gold);font-size:32px;margin-bottom:10px}.service-grid b{display:block;color:#e8d5a8;font-size:16px}.service-grid span{font-family:Cinzel,serif;font-size:11px;color:#ddd}.about{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;padding:70px 8vw;background:#f8f1e5}.about-image img{aspect-ratio:1.4/1;object-fit:cover}.align-left{justify-content:flex-start;text-align:left;margin-bottom:20px}.about-copy p{font-size:18px;line-height:2;color:#3b342d}.en-copy{font-family:Cinzel,serif;font-size:14px!important;color:#8a7550!important}.courses{padding:58px 6vw}.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1040px;margin:0 auto}.course-grid article{border:1px solid rgba(183,155,101,.4);padding:12px;text-align:center}.course-grid img{aspect-ratio:1.7/1;object-fit:cover}.course-grid h3{color:#e8d5a8;margin:14px 0 2px}.course-grid p{font-family:Cinzel,serif;font-size:11px;margin:0;color:#ddd}.shop{padding:58px 6vw;text-align:center;background:#fffaf1}.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;max-width:1280px;margin:0 auto 24px}.shop-grid img{width:100%;aspect-ratio:1.3/1;object-fit:cover}.shop-grid h3{font-size:20px;margin:24px 0 22px;letter-spacing:.06em}.shop-grid p{font-family:Cinzel,serif;font-size:20px;margin:0;color:#111;letter-spacing:0}.footer{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;background:#0b0b0a;color:#eee;padding:48px 6vw;border-top:1px solid rgba(183,155,101,.4)}.footer img{width:170px;filter:invert(1) brightness(4)}.footer-brand img{filter:none!important;width:170px;height:auto}.footer h3{color:#d8bf82}.footer p,.footer a{color:#ddd;line-height:1.9}@media(max-width:900px){.site-header{height:72px;padding:16px 22px;background:rgba(255,250,241,.88);position:absolute}.brand img{width:112px}.desktop-nav,.lang{display:none}.menu-btn{display:block;margin-left:auto}.mobile-menu{position:fixed;z-index:20;right:18px;top:70px;background:#111;color:#fff;padding:20px;display:none;flex-direction:column;gap:14px}.menu-open .mobile-menu{display:flex}.hero{height:auto;min-height:640px;padding:110px 22px 60px}.hero-photo{display:none}.ink-left{width:85vw}.hero{min-height:620px;height:auto;padding:108px 0 36px}.ink-left{left:-16vw;bottom:-8vh;width:96vw;height:44vh;background-size:100% 100%;-webkit-mask-image:linear-gradient(to right,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 65%,rgba(0,0,0,.65) 84%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(to right,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 65%,rgba(0,0,0,.65) 84%,rgba(0,0,0,0) 100%)}.ink-right{opacity:1;right:-22vw;top:12px;width:128vw;height:74vh;-webkit-mask-image:linear-gradient(to left,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 56%,rgba(0,0,0,.88) 72%,rgba(0,0,0,.56) 88%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(to left,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 56%,rgba(0,0,0,.88) 72%,rgba(0,0,0,.56) 88%,rgba(0,0,0,0) 100%)}.hero-logo{width:min(360px,82vw)}.hero-tagline{font-size:17px;letter-spacing:.08em}.hero-en{font-size:13px}.hero-actions{gap:12px}.btn{min-width:128px;height:52px;padding:0 14px}.collabs{padding-top:30px}.brand-grid{grid-template-columns:repeat(2,1fr);gap:14px}.brand-grid div{font-size:19px}.work-grid{grid-template-columns:repeat(3,1fr);gap:12px}.works{padding-left:18px;padding-right:18px}.work-card:nth-child(n+4){display:none}.work-card h3{font-size:13px}.section-title h2{font-size:22px}.section-title span{width:42px}.service-grid{grid-template-columns:repeat(2,1fr);gap:24px}.about{grid-template-columns:1fr;padding:46px 22px}.course-grid,.shop-grid{grid-template-columns:1fr}.footer{grid-template-columns:1fr;padding:40px 22px}}


/* === Standalone Portfolio Page === */
.portfolio-page {
  background:
    radial-gradient(circle at 16% 18%, rgba(184,151,98,.10), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(246,240,226,.92));
}

.desktop-nav a.active,
.mobile-nav a.active {
  color: var(--gold, #9b7a39);
}

.portfolio-hero {
  position: relative;
  padding: 150px 6vw 80px;
  min-height: 58vh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
}

.portfolio-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(247,242,232,.56), rgba(247,242,232,.92)),
    url("images/brush-v111/small-24.jpg") center 35% / cover no-repeat;
  opacity: .96;
  filter: saturate(.84) contrast(1.02) brightness(1.02);
}

.portfolio-hero-inner {
  position: relative;
  max-width: 920px;
  z-index: 1;
  padding: 42px 52px 38px;
  background: linear-gradient(180deg, rgba(255,251,243,.68), rgba(255,251,243,.42));
  border: 1px solid rgba(183,155,101,.28);
  box-shadow: 0 18px 48px rgba(49,40,24,.08);
  backdrop-filter: blur(4px);
}

.portfolio-hero-inner::before,
.portfolio-hero-inner::after {
  content: "";
  display: block;
  width: 88px;
  height: 1px;
  margin: 0 auto 22px;
  background: rgba(183,155,101,.62);
}

.portfolio-hero-inner::after {
  margin: 24px auto 0;
}

.portfolio-kicker {
  letter-spacing: .34em;
  font-size: 12px;
  color: var(--gold, #9b7a39);
  margin-bottom: 20px;
}

.portfolio-hero h1 {
  font-size: clamp(46px, 7.6vw, 96px);
  font-family: var(--serif, serif);
  letter-spacing: .18em;
  margin: 0 0 18px;
  font-weight: 500;
}

.portfolio-hero p {
  max-width: 680px;
  margin: 0 auto;
  line-height: 2.05;
  color: rgba(25,25,25,.68);
  letter-spacing: .04em;
}

.portfolio-tabs {
  position: relative;
  top: auto;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 18px 6vw;
  background: rgba(247,242,230,.96);
  backdrop-filter: none;
  border-top: 1px solid rgba(20,20,20,.06);
  border-bottom: 1px solid rgba(20,20,20,.08);
}

.portfolio-tabs a {
  text-decoration: none;
  color: rgba(22,22,22,.72);
  font-size: 14px;
  letter-spacing: .12em;
  padding: 10px 16px;
  border: 1px solid rgba(20,20,20,.12);
  background: rgba(255,255,255,.45);
  transition: .25s ease;
}

.portfolio-tabs a:hover {
  color: #111;
  border-color: rgba(155,122,57,.55);
  transform: translateY(-1px);
}

.portfolio-section {
  padding: 86px 6vw 28px;
}

.portfolio-section-head {
  display: grid;
  grid-template-columns: minmax(160px, 280px) minmax(0, 1fr);
  gap: 34px;
  align-items: end;
  max-width: 1320px;
  margin: 0 auto 34px;
}

.portfolio-section-number {
  color: rgba(155,122,57,.75);
  letter-spacing: .24em;
  font-size: 12px;
}

.portfolio-section h2 {
  font-family: var(--serif, serif);
  font-size: clamp(34px, 5vw, 64px);
  letter-spacing: .16em;
  margin: 8px 0 8px;
  font-weight: 500;
}

.portfolio-section .en {
  color: rgba(24,24,24,.45);
  letter-spacing: .18em;
  font-size: 12px;
}

.portfolio-section .desc {
  line-height: 2;
  color: rgba(24,24,24,.66);
  max-width: 660px;
}

.portfolio-gallery {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.portfolio-item {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.38);
  border: 1px solid rgba(20,20,20,.08);
  min-height: 280px;
}

.portfolio-item img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform .8s ease, filter .8s ease;
}

.portfolio-item:nth-child(3n+1) img {
  aspect-ratio: 1 / 1.22;
}

.portfolio-item:nth-child(4n+2) img {
  aspect-ratio: 1.28 / 1;
}

.portfolio-item:hover img {
  transform: scale(1.035);
  filter: contrast(1.03);
}

.portfolio-note {
  max-width: 1320px;
  margin: 78px auto 0;
  padding: 36px;
  border: 1px solid rgba(155,122,57,.25);
  background: rgba(255,255,255,.38);
  text-align: center;
  line-height: 2;
  color: rgba(24,24,24,.66);
}

@media(max-width:900px) {
  .portfolio-hero {
    padding-top: 120px;
  }

  .portfolio-tabs {
    top: 64px;
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .portfolio-tabs a {
    white-space: nowrap;
  }

  .portfolio-section-head {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .portfolio-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portfolio-item img {
    min-height: 260px;
  }
}

@media(max-width:560px) {
  .portfolio-gallery {
    grid-template-columns: 1fr;
  }

  .portfolio-section {
    padding-top: 68px;
  }
}


/* === Portfolio separate pages refinement === */
.portfolio-page .site-header {
  position: absolute;
}

.portfolio-page .desktop-nav a:first-child:not(.active) {
  color: inherit;
}

.portfolio-page .desktop-nav a.active,
.portfolio-page .desktop-nav a.active span,
.portfolio-page .mobile-nav a.active {
  color: var(--gold);
}

.mobile-nav {
  display: none;
}

.portfolio-tabs-pages a.current {
  background: #111;
  color: #fff;
  border-color: #111;
}

.portfolio-category-index {
  padding: 82px 6vw 104px;
  background:
    linear-gradient(180deg, rgba(252,248,241,1), rgba(248,243,234,1));
}

.portfolio-category-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 22px;
}

.portfolio-category-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-column: span 2;
  min-height: 284px;
  border: 1px solid rgba(20,20,20,.08);
  background: var(--paper);
  box-shadow: 0 16px 36px rgba(20,20,20,.05);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.portfolio-category-card:nth-child(5) {
  grid-column: 2 / span 2;
}

.portfolio-category-card figure {
  margin: 0;
  position: absolute;
  inset: 0;
}

.portfolio-category-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.02) saturate(.92);
  transform: scale(1.01);
  transition: transform .8s ease, filter .8s ease;
}

.portfolio-category-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.46)),
    radial-gradient(circle at 20% 20%, rgba(255,250,241,.20), transparent 36%);
}

.portfolio-category-card::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255,250,241,.24);
  z-index: 1;
  pointer-events: none;
}

.portfolio-category-copy {
  position: relative;
  z-index: 2;
  align-self: end;
  padding: 24px 24px 22px;
  color: #fffaf1;
}

.portfolio-category-copy span {
  color: #dfc995;
  font-family: Cinzel, serif;
  letter-spacing: .26em;
  font-size: 11px;
}

.portfolio-category-copy h2 {
  margin: 10px 0 6px;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 500;
  letter-spacing: .16em;
}

.portfolio-category-copy p {
  margin: 0;
  font-family: Cinzel, serif;
  color: rgba(255,250,241,.80);
  letter-spacing: .10em;
  font-size: 11px;
}

.portfolio-category-card:hover {
  transform: translateY(-5px);
  border-color: rgba(155,122,57,.26);
  box-shadow: 0 24px 52px rgba(20,20,20,.09);
}

.portfolio-category-card:hover img {
  transform: scale(1.05);
  filter: contrast(1.05) saturate(1);
}

.category-hero::before {
  background:
    linear-gradient(180deg, rgba(246,240,226,.24), rgba(246,240,226,.94)),
    var(--category-cover) center / cover no-repeat;
}

.back-link {
  display: inline-flex;
  margin-bottom: 20px;
  padding: 9px 16px;
  border: 1px solid rgba(20,20,20,.18);
  background: rgba(255,250,241,.55);
  color: rgba(17,17,17,.72);
  letter-spacing: .08em;
  font-size: 13px;
  transition: .25s ease;
}

.back-link:hover {
  border-color: var(--gold);
  color: #111;
  transform: translateY(-1px);
}

.portfolio-section-single {
  padding-top: 82px;
  padding-bottom: 100px;
  background: #fbf6ee;
}

@media(max-width:980px) {
  .portfolio-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portfolio-category-card,
  .portfolio-category-card:nth-child(5) {
    grid-column: auto;
    min-height: 330px;
  }
}

@media(max-width:760px) {
  .portfolio-page .desktop-nav,
  .portfolio-page .lang {
    display: none;
  }

  .portfolio-page .menu-btn {
    display: block;
    margin-left: auto;
  }

  .mobile-nav {
    position: fixed;
    z-index: 30;
    top: 76px;
    left: 6vw;
    right: 6vw;
    display: none;
    flex-direction: column;
    padding: 18px;
    background: rgba(255,250,241,.96);
    border: 1px solid rgba(20,20,20,.10);
    box-shadow: 0 18px 42px rgba(0,0,0,.12);
  }

  .menu-open .mobile-nav {
    display: flex;
  }

  .mobile-nav a {
    padding: 12px 4px;
    border-bottom: 1px solid rgba(20,20,20,.08);
  }

  .mobile-nav a:last-child {
    border-bottom: 0;
  }
}

@media(max-width:560px) {
  .portfolio-category-grid {
    grid-template-columns: 1fr;
  }

  .portfolio-category-index {
    padding: 56px 20px 72px;
  }

  .portfolio-category-card,
  .portfolio-category-card:nth-child(5) {
    grid-column: auto;
    min-height: 310px;
  }
}


/* === Portfolio fixed: category pages without repeated titles === */
.no-category-title main {
  padding-top: 104px;
  background: #fbf6ee;
}

.detail-tabs {
  padding-top: 22px;
}

.portfolio-section-gallery-only {
  padding: 42px 6vw 100px;
  background: #fbf6ee;
}

.portfolio-section-gallery-only .portfolio-gallery {
  margin-top: 0;
}

@media(max-width:760px) {
  .no-category-title main {
    padding-top: 84px;
  }

  .detail-tabs {
    padding-top: 16px;
  }

  .portfolio-section-gallery-only {
    padding-top: 28px;
  }
}



/* === Portfolio Facebook latest feed === */
.facebook-feed-section {
  padding: 82px 6vw 106px;
  background: linear-gradient(180deg, #fbf6ee, #f7f1e6);
  text-align: center;
  border-top: 1px solid rgba(183,155,101,.18);
}

.facebook-feed-shell {
  max-width: 760px;
  margin: 10px auto 0;
}

.facebook-feed-wrap {
  width: min(100%, 540px);
  margin: 0 auto;
  padding: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(249,244,235,.88));
  border: 1px solid rgba(183,155,101,.26);
  box-shadow: 0 24px 58px rgba(0,0,0,.07);
}

.facebook-feed-wrap iframe {
  display: block;
  width: 500px;
  max-width: none;
  height: 700px;
  margin: 0 auto;
}

.facebook-feed-btn {
  margin-top: 26px;
}

@media(max-width:760px) {
  .portfolio-hero {
    padding: 120px 20px 64px;
    min-height: 58vh;
  }

  .portfolio-hero-inner {
    padding: 32px 24px 28px;
  }

  .portfolio-category-index {
    padding: 64px 20px 80px;
  }

  .facebook-feed-section {
    padding: 58px 20px 76px;
  }

  .facebook-feed-wrap {
    width: 100%;
    padding: 10px;
  }

}

/* =========================================================
   About page
   ========================================================= */
.about-page {
  background: #fbf6ee;
}

.about-hero-page {
  position: relative;
  min-height: 62vh;
  padding: 150px 6vw 92px;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  background: #f5f1e9;
}

.about-hero-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(248,245,238,.34), rgba(248,245,238,.92)),
    url("images/home-work-live-writing-3.jpg") center 44% / cover no-repeat;
  opacity: .32;
  filter: grayscale(.12) contrast(1.04);
}

.about-hero-ink {
  position: absolute;
  right: -10vw;
  top: -10vh;
  width: min(760px, 72vw);
  height: min(680px, 72vh);
  background: url("images/hero-right-ink.png") right top / contain no-repeat;
  opacity: .62;
  pointer-events: none;
}

.about-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 840px;
}

.about-kicker {
  margin: 0 0 22px;
  font-family: Cinzel, serif;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: .32em;
}

.about-hero-page h1 {
  margin: 0 0 20px;
  font-size: clamp(44px, 7vw, 90px);
  letter-spacing: .18em;
  font-weight: 500;
}

.about-hero-page p:last-child {
  margin: 0 auto;
  max-width: 720px;
  color: rgba(20,20,20,.68);
  font-size: 19px;
  line-height: 2;
  letter-spacing: .08em;
}

.about-intro-block,
.about-founder {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 56px;
  align-items: center;
  padding: 86px 8vw;
  background: #fbf6ee;
}

.about-intro-image,
.about-founder-image {
  position: relative;
}

.about-intro-image::before,
.about-founder-image::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid rgba(183,155,101,.38);
  z-index: 0;
}

.about-intro-image img,
.about-founder-image img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1.08 / 1.25;
  object-fit: cover;
  box-shadow: 0 24px 70px rgba(0,0,0,.10);
}

.about-intro-copy p,
.about-founder-copy p {
  font-size: 17px;
  line-height: 2.08;
  color: #3b342d;
  letter-spacing: .03em;
}

.about-quote {
  padding: 76px 6vw;
  text-align: center;
}

.about-quote-inner {
  max-width: 960px;
  margin: 0 auto;
}

.about-quote p {
  margin: 0 0 18px;
  color: #f7ead0;
  font-size: clamp(25px, 4vw, 42px);
  line-height: 1.75;
  letter-spacing: .16em;
  font-weight: 500;
}

.about-quote span {
  font-family: Cinzel, serif;
  color: rgba(223,201,149,.82);
  letter-spacing: .24em;
  font-size: 12px;
}

.about-founder {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  background:
    radial-gradient(circle at 16% 20%, rgba(183,155,101,.10), transparent 28%),
    #fffaf1;
}

.about-founder-copy h3 {
  margin: 0 0 18px;
  font-size: clamp(30px, 4vw, 48px);
  letter-spacing: .18em;
  font-weight: 500;
  color: #1a1714;
}

.about-values {
  padding: 82px 6vw 94px;
  background: #f8f1e5;
}

.about-value-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.about-value-grid article {
  padding: 34px 30px 36px;
  background: rgba(255,250,241,.72);
  border: 1px solid rgba(183,155,101,.28);
  box-shadow: 0 18px 48px rgba(0,0,0,.055);
}

.about-value-grid b {
  display: block;
  margin-bottom: 28px;
  color: var(--gold);
  font-family: Cinzel, serif;
  letter-spacing: .18em;
}

.about-value-grid h3 {
  margin: 0 0 14px;
  font-size: 21px;
  letter-spacing: .12em;
  font-weight: 500;
}

.about-value-grid p {
  margin: 0;
  color: rgba(30,30,30,.68);
  line-height: 2;
}

.about-services-snapshot {
  padding: 82px 6vw 96px;
}

.about-snapshot-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.about-snapshot-grid a {
  min-height: 250px;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid rgba(223,201,149,.32);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    rgba(255,255,255,.04);
  transition: transform .28s ease, border-color .28s ease, background .28s ease;
}

.about-snapshot-grid a:hover {
  transform: translateY(-5px);
  border-color: rgba(223,201,149,.78);
  background: rgba(255,255,255,.08);
}

.about-snapshot-grid span {
  color: var(--gold);
  font-family: Cinzel, serif;
  letter-spacing: .22em;
  font-size: 12px;
}

.about-snapshot-grid h3 {
  margin: 12px 0 10px;
  color: #f7ead0;
  font-size: 23px;
  letter-spacing: .12em;
  font-weight: 500;
}

.about-snapshot-grid p {
  margin: 0;
  color: rgba(255,250,241,.72);
  line-height: 1.9;
}

.about-collabs {
  padding: 78px 6vw 86px;
  background: #fbf6ee;
  text-align: center;
}

.about-collab-list {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.about-collab-list span {
  min-width: 150px;
  padding: 17px 22px;
  border: 1px solid rgba(183,155,101,.34);
  background: rgba(255,250,241,.72);
  font-family: Cinzel, serif;
  font-size: 18px;
}

.about-cta {
  padding: 86px 6vw 96px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255,250,241,.75), rgba(248,241,229,.94)),
    #fffaf1;
}

.about-cta h2 {
  margin: 0 auto 16px;
  max-width: 860px;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.65;
  letter-spacing: .14em;
  font-weight: 500;
}

.about-cta p {
  margin: 0 auto 30px;
  max-width: 660px;
  color: rgba(30,30,30,.68);
  line-height: 2;
}

.about-cta-actions {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

@media(max-width:980px) {
  .about-intro-block,
  .about-founder {
    grid-template-columns: 1fr;
    padding: 66px 6vw;
  }

  .about-founder-image {
    order: -1;
  }

  .about-value-grid,
  .about-snapshot-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media(max-width:640px) {
  .about-hero-page {
    min-height: 56vh;
    padding: 124px 22px 72px;
  }

  .about-hero-page h1 {
    letter-spacing: .1em;
  }

  .about-hero-page p:last-child {
    font-size: 16px;
  }

  .about-intro-block,
  .about-founder {
    padding: 54px 22px;
    gap: 36px;
  }

  .about-intro-image::before,
  .about-founder-image::before {
    inset: 12px -10px -12px 10px;
  }

  .about-value-grid,
  .about-snapshot-grid {
    grid-template-columns: 1fr;
  }

  .about-values,
  .about-services-snapshot,
  .about-collabs,
  .about-cta {
    padding-left: 22px;
    padding-right: 22px;
  }

  .about-quote p {
    letter-spacing: .08em;
  }

  .about-collab-list span {
    width: 100%;
  }
}



/* =========================================================
   Services page
   ========================================================= */
.services-page {
  background: #fbf6ee;
}

.services-hero-page {
  position: relative;
  min-height: 62vh;
  padding: 150px 6vw 92px;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  background: #f5f1e9;
}

.services-hero-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(248,245,238,.24), rgba(248,245,238,.92)),
    url("images/portfolio-brand-05.jpg") center 48% / cover no-repeat;
  opacity: .30;
  filter: grayscale(.08) contrast(1.06);
}

.services-hero-ink {
  position: absolute;
  left: -10vw;
  top: -12vh;
  width: min(760px, 72vw);
  height: min(680px, 72vh);
  background: url("images/hero-left-ink-v42.png") left top / contain no-repeat;
  opacity: .52;
  pointer-events: none;
}

.services-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 860px;
}

.services-kicker {
  margin: 0 0 22px;
  font-family: Cinzel, serif;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: .32em;
}

.services-hero-page h1 {
  margin: 0 0 20px;
  font-size: clamp(44px, 7vw, 90px);
  letter-spacing: .18em;
  font-weight: 500;
}

.services-hero-page p:last-child {
  margin: 0 auto;
  max-width: 720px;
  color: rgba(20,20,20,.68);
  font-size: 19px;
  line-height: 2;
  letter-spacing: .08em;
}

.services-intro {
  padding: 78px 6vw 54px;
  text-align: center;
  background: #fbf6ee;
}

.services-intro > p {
  max-width: 920px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 2.1;
  color: #3b342d;
  letter-spacing: .035em;
}

.services-grid-section {
  padding: 36px 6vw 96px;
  background:
    radial-gradient(circle at 8% 15%, rgba(183,155,101,.10), transparent 28%),
    radial-gradient(circle at 92% 72%, rgba(20,18,17,.055), transparent 32%),
    #fbf6ee;
}

.services-grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.service-card {
  background: rgba(255,250,241,.74);
  border: 1px solid rgba(183,155,101,.30);
  box-shadow: 0 22px 62px rgba(0,0,0,.07);
  overflow: hidden;
  transition: transform .32s ease, box-shadow .32s ease, border-color .32s ease;
}

.service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(183,155,101,.58);
  box-shadow: 0 28px 76px rgba(0,0,0,.105);
}

.service-card a {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  min-height: 360px;
  color: inherit;
  text-decoration: none;
}

.service-card-image {
  overflow: hidden;
  background: #e8decc;
}

.service-card-image img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  display: block;
  object-fit: cover;
  transition: transform .68s cubic-bezier(.22, 1, .36, 1), filter .68s ease;
  filter: saturate(.95) contrast(1.03);
}

.service-card:hover .service-card-image img {
  transform: scale(1.06);
  filter: saturate(1) contrast(1.08);
}

.service-card-copy {
  padding: 34px 32px 32px;
  display: flex;
  flex-direction: column;
}

.service-card-copy span {
  color: var(--gold);
  font-family: Cinzel, serif;
  letter-spacing: .22em;
  font-size: 12px;
}

.service-card-copy h2 {
  margin: 13px 0 14px;
  font-size: 28px;
  letter-spacing: .12em;
  font-weight: 500;
  color: #17130f;
}

.service-card-copy p {
  margin: 0 0 18px;
  color: rgba(30,30,30,.72);
  line-height: 1.95;
  letter-spacing: .03em;
}

.service-card-copy ul {
  margin: auto 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.service-card-copy li {
  position: relative;
  padding-left: 18px;
  color: rgba(30,30,30,.68);
  font-size: 14px;
  line-height: 1.65;
}

.service-card-copy li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 6px;
  height: 1px;
  background: var(--gold);
}

.services-process {
  padding: 84px 6vw 98px;
  position: relative;
  overflow: hidden;
}

.services-process::before {
  content: "";
  position: absolute;
  left: -10%;
  top: -20%;
  width: 520px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,0,0,.38), rgba(0,0,0,.08) 42%, transparent 72%);
  filter: blur(34px);
  opacity: .58;
  pointer-events: none;
}

.process-grid {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.process-grid article {
  min-height: 245px;
  padding: 30px 26px;
  border: 1px solid rgba(223,201,149,.32);
  background: rgba(255,255,255,.045);
}

.process-grid b {
  display: block;
  margin-bottom: 34px;
  color: var(--gold);
  font-family: Cinzel, serif;
  letter-spacing: .18em;
}

.process-grid h3 {
  margin: 0 0 12px;
  color: #f7ead0;
  font-size: 22px;
  letter-spacing: .12em;
  font-weight: 500;
}

.process-grid p {
  margin: 0;
  color: rgba(255,250,241,.72);
  line-height: 1.9;
}

.services-suitable {
  padding: 82px 6vw 88px;
  background: #f8f1e5;
  text-align: center;
}

.suitable-tags {
  max-width: 1060px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.suitable-tags span {
  padding: 14px 22px;
  border: 1px solid rgba(183,155,101,.35);
  background: rgba(255,250,241,.72);
  color: #1c1814;
  letter-spacing: .08em;
}

.services-cta {
  padding: 86px 6vw 96px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255,250,241,.75), rgba(248,241,229,.94)),
    #fffaf1;
}

.services-cta h2 {
  margin: 0 auto 16px;
  max-width: 860px;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.65;
  letter-spacing: .14em;
  font-weight: 500;
}

.services-cta p {
  margin: 0 auto 30px;
  max-width: 700px;
  color: rgba(30,30,30,.68);
  line-height: 2;
}

.services-cta-actions {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

@media(max-width:1080px) {
  .services-grid {
    grid-template-columns: 1fr;
  }

  .service-card a {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  }

  .process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media(max-width:760px) {
  .services-hero-page {
    min-height: 56vh;
    padding: 124px 22px 72px;
  }

  .services-hero-page h1 {
    letter-spacing: .1em;
  }

  .services-hero-page p:last-child {
    font-size: 16px;
  }

  .services-intro,
  .services-grid-section,
  .services-process,
  .services-suitable,
  .services-cta {
    padding-left: 22px;
    padding-right: 22px;
  }

  .service-card a {
    grid-template-columns: 1fr;
  }

  .service-card-image img {
    min-height: 260px;
    aspect-ratio: 1 / .72;
  }

  .service-card-copy {
    padding: 28px 24px 30px;
  }

  .service-card-copy h2 {
    font-size: 24px;
  }

  .process-grid {
    grid-template-columns: 1fr;
  }

  .process-grid article {
    min-height: 0;
  }

  .suitable-tags span {
    width: 100%;
  }
}



/* =========================================================
   Courses page
   ========================================================= */
.courses-page {
  background: #fbf6ee;
}

.courses-hero-page {
  position: relative;
  min-height: 62vh;
  padding: 150px 6vw 92px;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  background: #f5f1e9;
}

.courses-hero-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(248,245,238,.22), rgba(248,245,238,.94)),
    url("images/course-calligraphy-class.jpg") center 45% / cover no-repeat;
  opacity: .30;
  filter: grayscale(.08) contrast(1.06);
}

.courses-hero-ink {
  position: absolute;
  right: -10vw;
  top: -12vh;
  width: min(760px, 72vw);
  height: min(680px, 72vh);
  background: url("images/hero-right-ink.png") right top / contain no-repeat;
  opacity: .54;
  pointer-events: none;
}

.courses-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 860px;
}

.courses-kicker {
  margin: 0 0 22px;
  font-family: Cinzel, serif;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: .32em;
}

.courses-hero-page h1 {
  margin: 0 0 20px;
  font-size: clamp(44px, 7vw, 90px);
  letter-spacing: .18em;
  font-weight: 500;
}

.courses-hero-page p:last-child {
  margin: 0 auto;
  max-width: 720px;
  color: rgba(20,20,20,.68);
  font-size: 19px;
  line-height: 2;
  letter-spacing: .08em;
}

.courses-intro {
  padding: 78px 6vw 56px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(183,155,101,.08), transparent 42%),
    #fbf6ee;
}

.courses-intro > p {
  max-width: 920px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 2.1;
  color: #3b342d;
  letter-spacing: .035em;
}

.courses-featured {
  padding: 34px 7vw 94px;
  background: #fbf6ee;
}

.course-feature-card {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: center;
}

.course-feature-image {
  position: relative;
}

.course-feature-image::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid rgba(183,155,101,.42);
  z-index: 0;
}

.course-feature-image img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1.08 / 1.22;
  object-fit: cover;
  box-shadow: 0 26px 76px rgba(0,0,0,.10);
}

.course-feature-copy span,
.online-course-copy span,
.course-extra-grid span {
  color: var(--gold);
  font-family: Cinzel, serif;
  letter-spacing: .22em;
  font-size: 12px;
}

.course-feature-copy h2 {
  margin: 14px 0 18px;
  font-size: clamp(34px, 4vw, 54px);
  letter-spacing: .16em;
  font-weight: 500;
}

.course-feature-copy p {
  color: #3b342d;
  line-height: 2.08;
  font-size: 17px;
}

.course-feature-copy ul {
  margin: 22px 0 30px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.course-feature-copy li {
  position: relative;
  padding-left: 20px;
  color: rgba(30,30,30,.68);
}

.course-feature-copy li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .78em;
  width: 7px;
  height: 1px;
  background: var(--gold);
}

.online-courses {
  padding: 84px 6vw 98px;
  position: relative;
  overflow: hidden;
}

.online-courses::before {
  content: "";
  position: absolute;
  right: -8%;
  top: -20%;
  width: 520px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,0,0,.34), rgba(0,0,0,.08) 42%, transparent 72%);
  filter: blur(34px);
  opacity: .54;
  pointer-events: none;
}

.online-course-grid {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.online-course-card {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(223,201,149,.36);
  box-shadow: 0 24px 70px rgba(0,0,0,.18);
  overflow: hidden;
}

.online-course-image {
  overflow: hidden;
  background: #12100d;
}

.online-course-image img {
  width: 100%;
  aspect-ratio: 1 / .62;
  object-fit: cover;
  display: block;
  filter: saturate(.9) contrast(1.08) brightness(.96);
  transition: transform .65s cubic-bezier(.22, 1, .36, 1);
}

.online-course-card:hover .online-course-image img {
  transform: scale(1.05);
}

.online-course-copy {
  padding: 34px 32px 36px;
}

.online-course-copy h3 {
  margin: 13px 0 14px;
  color: #f7ead0;
  font-size: 27px;
  letter-spacing: .14em;
  font-weight: 500;
}

.online-course-copy p {
  color: rgba(255,250,241,.74);
  line-height: 1.95;
  margin-bottom: 24px;
}

.courses-extra {
  padding: 84px 6vw 94px;
  background:
    radial-gradient(circle at 12% 10%, rgba(183,155,101,.10), transparent 28%),
    #f8f1e5;
}

.course-extra-grid {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 24px;
}

.course-extra-grid article {
  display: grid;
  grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr);
  gap: 24px;
  align-items: center;
  background: rgba(255,250,241,.78);
  border: 1px solid rgba(183,155,101,.34);
  padding: 18px;
  box-shadow: 0 20px 56px rgba(0,0,0,.07);
}

.course-extra-grid img {
  width: 100%;
  aspect-ratio: 1 / .88;
  object-fit: cover;
}

.course-extra-grid h3 {
  margin: 10px 0 10px;
  font-size: 23px;
  letter-spacing: .12em;
  font-weight: 500;
}

.course-extra-grid p {
  color: rgba(30,30,30,.70);
  line-height: 1.9;
}

.course-method {
  padding: 84px 6vw 92px;
  background: #fbf6ee;
}

.course-method-grid {
  max-width: 1060px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 20px;
}

.course-method-grid article {
  padding: 34px 30px 36px;
  background: rgba(255,250,241,.76);
  border: 1px solid rgba(183,155,101,.30);
  box-shadow: 0 18px 48px rgba(0,0,0,.055);
}

.course-method-grid b {
  display: block;
  margin-bottom: 28px;
  color: var(--gold);
  font-family: Cinzel, serif;
  letter-spacing: .18em;
}

.course-method-grid h3 {
  margin: 0 0 14px;
  font-size: 21px;
  letter-spacing: .12em;
  font-weight: 500;
}

.course-method-grid p {
  margin: 0;
  color: rgba(30,30,30,.68);
  line-height: 2;
}

.courses-cta {
  padding: 86px 6vw 96px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255,250,241,.75), rgba(248,241,229,.94)),
    #fffaf1;
}

.courses-cta h2 {
  margin: 0 auto 16px;
  max-width: 860px;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.65;
  letter-spacing: .14em;
  font-weight: 500;
}

.courses-cta p {
  margin: 0 auto 30px;
  max-width: 700px;
  color: rgba(30,30,30,.68);
  line-height: 2;
}

.courses-cta-actions {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

@media(max-width:980px) {
  .course-feature-card,
  .course-extra-grid {
    grid-template-columns: 1fr;
  }

  .online-course-grid,
  .course-method-grid {
    grid-template-columns: 1fr;
  }

  .course-extra-grid article {
    grid-template-columns: 1fr;
  }
}

@media(max-width:640px) {
  .courses-hero-page {
    min-height: 56vh;
    padding: 124px 22px 72px;
  }

  .courses-hero-page h1 {
    letter-spacing: .1em;
  }

  .courses-hero-page p:last-child {
    font-size: 16px;
  }

  .courses-intro,
  .courses-featured,
  .online-courses,
  .courses-extra,
  .course-method,
  .courses-cta {
    padding-left: 22px;
    padding-right: 22px;
  }

  .course-feature-card {
    gap: 36px;
  }

  .course-feature-image::before {
    inset: 12px -10px -12px 10px;
  }

  .online-course-copy {
    padding: 28px 24px 32px;
  }

  .online-course-copy h3 {
    font-size: 23px;
  }

  .course-method-grid article {
    padding: 30px 24px;
  }
}



/* =========================================================
   In-person course page
   ========================================================= */
.inperson-course-page {
  background: #fbf6ee;
}

.inperson-hero {
  position: relative;
  min-height: 66vh;
  padding: 150px 6vw 96px;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  background: #f5f1e9;
}

.inperson-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(248,245,238,.18), rgba(248,245,238,.94)),
    url("images/course-calligraphy-class.jpg") center 46% / cover no-repeat;
  opacity: .34;
  filter: grayscale(.08) contrast(1.08);
}

.inperson-hero-ink {
  position: absolute;
  left: -9vw;
  bottom: -16vh;
  width: min(760px, 72vw);
  height: min(680px, 72vh);
  background: url("images/hero-left-ink-v42.png") left bottom / contain no-repeat;
  opacity: .50;
  pointer-events: none;
}

.inperson-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
}

.inperson-kicker {
  margin: 0 0 22px;
  font-family: Cinzel, serif;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: .32em;
}

.inperson-hero h1 {
  margin: 0 0 20px;
  font-size: clamp(42px, 7vw, 88px);
  letter-spacing: .16em;
  font-weight: 500;
}

.inperson-hero p {
  margin: 0 auto;
  max-width: 760px;
  color: rgba(20,20,20,.68);
  font-size: 18px;
  line-height: 2;
  letter-spacing: .075em;
}

.inperson-hero-actions {
  margin-top: 34px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.inperson-overview {
  padding: 92px 7vw 92px;
  max-width: 1220px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr);
  gap: 58px;
  align-items: center;
}

.inperson-overview-image {
  position: relative;
}

.inperson-overview-image::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid rgba(183,155,101,.42);
}

.inperson-overview-image img {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.15;
  object-fit: cover;
  box-shadow: 0 26px 76px rgba(0,0,0,.10);
}

.inperson-overview-copy span,
.inperson-teacher-card span {
  color: var(--gold);
  font-family: Cinzel, serif;
  letter-spacing: .22em;
  font-size: 12px;
}

.inperson-overview-copy h2,
.inperson-teacher-card h2 {
  margin: 14px 0 18px;
  font-size: clamp(30px, 4vw, 50px);
  letter-spacing: .14em;
  line-height: 1.55;
  font-weight: 500;
}

.inperson-overview-copy p,
.inperson-teacher-card p {
  color: #3b342d;
  line-height: 2.05;
  font-size: 16px;
}

.inperson-info,
.inperson-suitable {
  padding: 86px 6vw 92px;
  background:
    radial-gradient(circle at 12% 10%, rgba(183,155,101,.10), transparent 28%),
    #f8f1e5;
}

.inperson-info-grid {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
}

.inperson-info-grid article {
  min-height: 245px;
  padding: 30px 26px;
  background: rgba(255,250,241,.78);
  border: 1px solid rgba(183,155,101,.34);
  box-shadow: 0 18px 48px rgba(0,0,0,.055);
}

.inperson-info-grid b {
  display: block;
  margin-bottom: 30px;
  color: var(--gold);
  font-family: Cinzel, serif;
  letter-spacing: .18em;
}

.inperson-info-grid h3 {
  margin: 0 0 14px;
  font-size: 21px;
  letter-spacing: .12em;
  font-weight: 500;
}

.inperson-info-grid p {
  margin: 0;
  color: rgba(30,30,30,.68);
  line-height: 2;
}

.inperson-style {
  padding: 86px 6vw 96px;
  position: relative;
  overflow: hidden;
}

.inperson-method-layout {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: 42px;
  align-items: center;
}

.inperson-method-image img {
  width: 100%;
  aspect-ratio: 1 / .86;
  object-fit: cover;
  border: 1px solid rgba(223,201,149,.36);
  box-shadow: 0 24px 70px rgba(0,0,0,.20);
}

.inperson-method-list {
  display: grid;
  gap: 18px;
}

.inperson-method-list div {
  padding: 24px 26px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(223,201,149,.30);
}

.inperson-method-list h3 {
  margin: 0 0 10px;
  color: #f7ead0;
  font-size: 22px;
  letter-spacing: .12em;
  font-weight: 500;
}

.inperson-method-list p {
  margin: 0;
  color: rgba(255,250,241,.72);
  line-height: 1.9;
}

.inperson-tags {
  max-width: 1060px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.inperson-tags span {
  padding: 14px 22px;
  border: 1px solid rgba(183,155,101,.38);
  background: rgba(255,250,241,.78);
  color: #1c1814;
  letter-spacing: .08em;
}

.inperson-teacher {
  padding: 86px 7vw 94px;
  background: #fbf6ee;
}

.inperson-teacher-card {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  gap: 38px;
  align-items: center;
  padding: 40px;
  background:
    linear-gradient(180deg, rgba(255,250,241,.88), rgba(247,239,225,.78));
  border: 1px solid rgba(183,155,101,.38);
  box-shadow: 0 24px 70px rgba(0,0,0,.08);
}

.inperson-teacher-card img {
  width: 100%;
  aspect-ratio: 1 / .82;
  object-fit: cover;
}

.inperson-cta {
  padding: 88px 6vw 98px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255,250,241,.75), rgba(248,241,229,.94)),
    #fffaf1;
}

.inperson-cta h2 {
  margin: 0 auto 16px;
  max-width: 860px;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.65;
  letter-spacing: .14em;
  font-weight: 500;
}

.inperson-cta p {
  margin: 0 auto 30px;
  max-width: 720px;
  color: rgba(30,30,30,.68);
  line-height: 2;
}

.inperson-cta-actions {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

@media(max-width:1080px) {
  .inperson-info-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media(max-width:880px) {
  .inperson-overview,
  .inperson-method-layout,
  .inperson-teacher-card {
    grid-template-columns: 1fr;
  }
}

@media(max-width:640px) {
  .inperson-hero {
    min-height: 58vh;
    padding: 124px 22px 72px;
  }

  .inperson-hero h1 {
    letter-spacing: .1em;
  }

  .inperson-hero p {
    font-size: 16px;
  }

  .inperson-overview,
  .inperson-info,
  .inperson-style,
  .inperson-suitable,
  .inperson-teacher,
  .inperson-cta {
    padding-left: 22px;
    padding-right: 22px;
  }

  .inperson-info-grid {
    grid-template-columns: 1fr;
  }

  .inperson-info-grid article {
    min-height: 0;
  }

  .inperson-overview-image::before {
    inset: 12px -10px -12px 10px;
  }

  .inperson-teacher-card {
    padding: 26px;
  }

  .inperson-tags span {
    width: 100%;
    text-align: center;
  }
}

/* Page transition: 淡入淡出切換頁面 */
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(8px); filter: blur(2px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes pageFadeOut {
  from { opacity: 1; transform: translateY(0); filter: blur(0); }
  to { opacity: 0; transform: translateY(6px); filter: blur(2px); }
}

body {
  opacity: 0;
  animation: pageFadeIn .72s cubic-bezier(.22, 1, .36, 1) forwards;
  will-change: opacity, transform, filter;
}

body.page-fade-out {
  animation: pageFadeOut .34s ease-in forwards;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  body,
  body.page-fade-out {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }
}

/* === Portfolio captions + stronger zoom + lightbox === */
.portfolio-item {
  cursor: zoom-in;
  box-shadow: 0 16px 36px rgba(0,0,0,.055);
}

.portfolio-item a.portfolio-lightbox-link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
  outline: none;
}

.portfolio-item img {
  transform: scale(1.01);
  transition:
    transform 1.05s cubic-bezier(.22, 1, .36, 1),
    filter 1.05s cubic-bezier(.22, 1, .36, 1);
}

.portfolio-item:hover img,
.portfolio-item:focus-within img {
  transform: scale(1.14);
  filter: contrast(1.08) saturate(1.04);
}

.portfolio-item figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 22px 22px 20px;
  color: #fffaf1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.72) 42%, rgba(0,0,0,.88));
  transform: translateY(8px);
  opacity: .96;
  transition:
    transform .45s cubic-bezier(.22, 1, .36, 1),
    opacity .45s ease;
  pointer-events: none;
}

.portfolio-item:hover figcaption,
.portfolio-item:focus-within figcaption {
  transform: translateY(0);
  opacity: 1;
}

.portfolio-item figcaption strong {
  display: block;
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: .08em;
  font-weight: 600;
}

.portfolio-item figcaption span {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.75;
  color: rgba(255,250,241,.82);
  letter-spacing: .04em;
}

.portfolio-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: block;
  padding: 56px 28px 64px;
  background: rgba(9,8,7,.9);
  opacity: 0;
  pointer-events: none;
  overflow-x: hidden;
  overflow-y: scroll;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  transition: opacity .28s ease;
}

.portfolio-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

body.lightbox-open {
  overflow: hidden;
}

.portfolio-lightbox-panel {
  width: min(1180px, 94vw);
  min-height: calc(100vh + 1px);
  margin: 0 auto;
  display: grid;
  gap: 14px;
  transform: translateY(12px) scale(.985);
  transition: transform .32s cubic-bezier(.22, 1, .36, 1);
}

.portfolio-lightbox.is-open .portfolio-lightbox-panel {
  transform: translateY(0) scale(1);
}

.portfolio-lightbox-panel img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: none;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  box-shadow: 0 30px 90px rgba(0,0,0,.45);
  background: #111;
}

.portfolio-lightbox-panel figcaption {
  color: #fffaf1;
  text-align: center;
  line-height: 1.8;
}

.portfolio-lightbox-panel figcaption strong {
  display: block;
  font-size: 18px;
  letter-spacing: .08em;
}

.portfolio-lightbox-panel figcaption span {
  display: block;
  margin-top: 2px;
  color: rgba(255,250,241,.72);
  font-size: 14px;
  letter-spacing: .04em;
}

.portfolio-lightbox-close {
  position: fixed;
  top: 22px;
  right: 24px;
  z-index: 1000;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,250,241,.45);
  border-radius: 50%;
  background: rgba(0,0,0,.22);
  color: #fffaf1;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

@media(max-width:760px) {
  .portfolio-item figcaption {
    padding: 18px 18px 16px;
  }

  .portfolio-item figcaption strong {
    font-size: 16px;
  }

  .portfolio-item figcaption span {
    font-size: 12px;
  }

  .portfolio-lightbox {
    padding: 54px 16px 56px;
  }

  .portfolio-lightbox-panel {
    width: 100%;
  }

  .portfolio-lightbox-panel img {
    max-width: 100%;
    max-height: none;
  }
}


.portfolio-lightbox img {
  cursor: zoom-out;
}


/* =========================================================
   Portfolio lightbox scroll + zoom final fix
   ========================================================= */
body.lightbox-open {
  overflow: hidden !important;
}

.portfolio-lightbox {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  background: rgba(9, 8, 7, .92) !important;
  opacity: 0;
  pointer-events: none;
  overflow: hidden !important;
  transition: opacity .28s ease;
}

.portfolio-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.portfolio-lightbox-toolbar {
  flex: 0 0 auto;
  min-height: 58px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fffaf1;
  background: linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,.16));
  box-sizing: border-box;
}

.portfolio-lightbox-toolbar button,
.portfolio-lightbox-close {
  width: auto;
  min-width: 42px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255,250,241,.42);
  border-radius: 999px;
  background: rgba(255,250,241,.08);
  color: #fffaf1;
  font-family: inherit;
  font-size: 15px;
  line-height: 38px;
  letter-spacing: .04em;
  cursor: pointer;
}

.portfolio-lightbox-toolbar button:hover,
.portfolio-lightbox-close:hover {
  background: rgba(255,250,241,.16);
}

.portfolio-lightbox-close {
  position: static !important;
  font-size: 28px;
  line-height: 35px;
  padding: 0 13px;
}

.portfolio-lightbox-stage {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
  padding: 24px 24px 72px;
  box-sizing: border-box;
  cursor: grab;
}

.portfolio-lightbox-stage.is-dragging {
  cursor: grabbing;
}

.portfolio-lightbox-panel {
  width: max-content !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  display: block !important;
  transform: none !important;
  transition: none !important;
}

.portfolio-lightbox-panel img {
  display: block !important;
  width: auto;
  max-width: none !important;
  max-height: none !important;
  height: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  transform: none !important;
  user-select: none;
  -webkit-user-drag: none;
  cursor: grab;
  box-shadow: 0 30px 90px rgba(0,0,0,.48);
  background: #111;
}

.portfolio-lightbox-stage.is-dragging .portfolio-lightbox-panel img {
  cursor: grabbing;
}

.portfolio-lightbox-panel figcaption {
  max-width: min(920px, 90vw);
  margin: 16px auto 0;
  color: #fffaf1;
  text-align: center;
  line-height: 1.8;
}

.portfolio-lightbox-help {
  color: rgba(255,250,241,.68);
  font-size: 13px;
  letter-spacing: .04em;
}

@media (max-width: 720px) {
  .portfolio-lightbox-toolbar {
    justify-content: flex-start;
    overflow-x: auto;
    padding: 10px 12px;
  }

  .portfolio-lightbox-stage {
    padding: 16px 14px 58px;
  }

  .portfolio-lightbox-help {
    display: none;
  }
}

/* =========================================================
   Portfolio lightbox native scroll final override
   - 保留縮放工具列
   - 滾輪改回瀏覽器原生捲動，穩定度最高
   ========================================================= */
body.lightbox-open {
  overflow: hidden !important;
}

.portfolio-lightbox {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  background: rgba(9, 8, 7, .92) !important;
  opacity: 0;
  pointer-events: none;
  overflow: hidden !important;
  transition: opacity .28s ease;
}

.portfolio-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.portfolio-lightbox-toolbar {
  flex: 0 0 auto !important;
  min-height: 58px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fffaf1;
  background: linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.18));
  box-sizing: border-box;
}

.portfolio-lightbox-toolbar button,
.portfolio-lightbox-close {
  width: auto;
  min-width: 42px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255,250,241,.42);
  border-radius: 999px;
  background: rgba(255,250,241,.08);
  color: #fffaf1;
  font-family: inherit;
  font-size: 15px;
  line-height: 38px;
  letter-spacing: .04em;
  cursor: pointer;
}

.portfolio-lightbox-close {
  position: static !important;
  font-size: 28px;
  line-height: 35px;
  padding: 0 13px;
}

.portfolio-lightbox-stage {
  flex: 1 1 auto !important;
  height: calc(100dvh - 58px) !important;
  min-height: 0 !important;
  width: 100% !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
  padding: 24px 24px 72px;
  box-sizing: border-box;
  cursor: grab;
  touch-action: pan-x pan-y;
}

.portfolio-lightbox-stage.is-dragging {
  cursor: grabbing;
}

.portfolio-lightbox-panel {
  width: max-content !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  display: block !important;
  transform: none !important;
  transition: none !important;
}

.portfolio-lightbox-panel img {
  display: block !important;
  width: auto;
  max-width: none !important;
  max-height: none !important;
  height: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  transform: none !important;
  user-select: none;
  -webkit-user-drag: none;
  cursor: grab;
  box-shadow: 0 30px 90px rgba(0,0,0,.48);
  background: #111;
}

.portfolio-lightbox-stage.is-dragging .portfolio-lightbox-panel img {
  cursor: grabbing;
}

.portfolio-lightbox-panel figcaption {
  max-width: min(920px, 90vw);
  margin: 16px auto 0;
  color: #fffaf1;
  text-align: center;
  line-height: 1.8;
}

.portfolio-lightbox-help {
  color: rgba(255,250,241,.68);
  font-size: 13px;
  letter-spacing: .04em;
}

@media (max-width: 720px) {
  .portfolio-lightbox-toolbar {
    justify-content: flex-start;
    overflow-x: auto;
    padding: 10px 12px;
  }

  .portfolio-lightbox-stage {
    height: calc(100dvh - 54px) !important;
    padding: 16px 14px 58px;
  }

  .portfolio-lightbox-help {
    display: none;
  }
}

/* =========================================================
   Portfolio lightbox: pan + wheel zoom
   需求：
   1. 點開先以畫面約 80% 呈現
   2. 滑鼠滾輪直接 zoom in / zoom out
   3. 放大後可用滑鼠左鍵拖曳移動圖片
   ========================================================= */
body.lightbox-open {
  overflow: hidden !important;
}

.portfolio-lightbox {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  background: rgba(9, 8, 7, .93) !important;
  opacity: 0;
  pointer-events: none;
  overflow: hidden !important;
  transition: opacity .28s ease;
}

.portfolio-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.portfolio-lightbox-toolbar {
  flex: 0 0 auto !important;
  min-height: 58px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fffaf1;
  background: linear-gradient(180deg, rgba(0,0,0,.74), rgba(0,0,0,.2));
  box-sizing: border-box;
  z-index: 2;
}

.portfolio-lightbox-toolbar button,
.portfolio-lightbox-close {
  width: auto;
  min-width: 42px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255,250,241,.42);
  border-radius: 999px;
  background: rgba(255,250,241,.08);
  color: #fffaf1;
  font-family: inherit;
  font-size: 15px;
  line-height: 38px;
  letter-spacing: .04em;
  cursor: pointer;
}

.portfolio-lightbox-toolbar button:hover,
.portfolio-lightbox-close:hover {
  background: rgba(255,250,241,.16);
}

.portfolio-lightbox-close {
  position: static !important;
  font-size: 28px;
  line-height: 35px;
  padding: 0 13px;
}

.portfolio-lightbox-stage {
  position: relative;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
  cursor: grab;
  touch-action: none;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.045), rgba(0,0,0,0) 56%);
}

.portfolio-lightbox-stage.is-dragging {
  cursor: grabbing;
}

.portfolio-lightbox-stage img {
  position: absolute !important;
  left: 0;
  top: 0;
  display: block !important;
  width: auto;
  max-width: none !important;
  max-height: none !important;
  height: auto !important;
  object-fit: contain !important;
  transform-origin: 0 0 !important;
  transform: translate3d(0,0,0) scale(1);
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  cursor: grab;
  box-shadow: 0 30px 90px rgba(0,0,0,.48);
  background: #111;
  will-change: transform;
}

.portfolio-lightbox-stage.is-dragging img {
  cursor: grabbing;
}

.portfolio-lightbox-caption {
  flex: 0 0 auto;
  min-height: 70px;
  padding: 14px 24px 20px;
  color: #fffaf1;
  text-align: center;
  line-height: 1.8;
  background: linear-gradient(0deg, rgba(0,0,0,.72), rgba(0,0,0,.18));
  box-sizing: border-box;
  z-index: 2;
}

.portfolio-lightbox-caption strong {
  display: block;
  font-size: 18px;
  letter-spacing: .08em;
}

.portfolio-lightbox-caption span {
  display: block;
  margin-top: 2px;
  color: rgba(255,250,241,.72);
  font-size: 14px;
  letter-spacing: .04em;
}

.portfolio-lightbox-help {
  color: rgba(255,250,241,.68);
  font-size: 13px;
  letter-spacing: .04em;
}

@media (max-width: 720px) {
  .portfolio-lightbox-toolbar {
    justify-content: flex-start;
    overflow-x: auto;
    padding: 10px 12px;
    min-height: 54px;
  }

  .portfolio-lightbox-help {
    display: none;
  }

  .portfolio-lightbox-caption {
    min-height: 64px;
    padding: 12px 18px 16px;
  }

  .portfolio-lightbox-caption strong {
    font-size: 16px;
  }

  .portfolio-lightbox-caption span {
    font-size: 12px;
  }
}

/* =========================================================
   Unified portfolio lightbox
   - 所有分類頁作品圖統一使用同一套 Pan & Zoom 視窗
   ========================================================= */
body.lightbox-open {
  overflow: hidden !important;
}

.portfolio-lightbox {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  background: rgba(9, 8, 7, .93) !important;
  opacity: 0;
  pointer-events: none;
  overflow: hidden !important;
  transition: opacity .28s ease;
}

.portfolio-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.portfolio-lightbox-toolbar {
  flex: 0 0 auto !important;
  min-height: 58px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fffaf1;
  background: linear-gradient(180deg, rgba(0,0,0,.74), rgba(0,0,0,.2));
  box-sizing: border-box;
  z-index: 2;
}

.portfolio-lightbox-toolbar button,
.portfolio-lightbox-close {
  width: auto;
  min-width: 42px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255,250,241,.42);
  border-radius: 999px;
  background: rgba(255,250,241,.08);
  color: #fffaf1;
  font-family: inherit;
  font-size: 15px;
  line-height: 38px;
  letter-spacing: .04em;
  cursor: pointer;
}

.portfolio-lightbox-toolbar button:hover,
.portfolio-lightbox-close:hover {
  background: rgba(255,250,241,.16);
}

.portfolio-lightbox-close {
  position: static !important;
  font-size: 28px;
  line-height: 35px;
  padding: 0 13px;
}

.portfolio-lightbox-stage {
  position: relative;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
  cursor: grab;
  touch-action: none;
  background: radial-gradient(circle at center, rgba(255,255,255,.045), rgba(0,0,0,0) 56%);
}

.portfolio-lightbox-stage.is-dragging {
  cursor: grabbing;
}

.portfolio-lightbox-stage img {
  position: absolute !important;
  left: 0;
  top: 0;
  display: block !important;
  width: auto;
  max-width: none !important;
  max-height: none !important;
  height: auto !important;
  object-fit: contain !important;
  transform-origin: 0 0 !important;
  transform: translate3d(0,0,0) scale(1);
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  cursor: grab;
  box-shadow: 0 30px 90px rgba(0,0,0,.48);
  background: #111;
  will-change: transform;
}

.portfolio-lightbox-stage.is-dragging img {
  cursor: grabbing;
}

.portfolio-lightbox-caption {
  flex: 0 0 auto;
  min-height: 70px;
  padding: 14px 24px 20px;
  color: #fffaf1;
  text-align: center;
  line-height: 1.8;
  background: linear-gradient(0deg, rgba(0,0,0,.72), rgba(0,0,0,.18));
  box-sizing: border-box;
  z-index: 2;
}

.portfolio-lightbox-caption strong {
  display: block;
  font-size: 18px;
  letter-spacing: .08em;
}

.portfolio-lightbox-caption span {
  display: block;
  margin-top: 2px;
  color: rgba(255,250,241,.72);
  font-size: 14px;
  letter-spacing: .04em;
}

.portfolio-lightbox-help {
  color: rgba(255,250,241,.68);
  font-size: 13px;
  letter-spacing: .04em;
}

.no-category-title .portfolio-gallery .portfolio-item img {
  cursor: zoom-in;
}

@media (max-width: 720px) {
  .portfolio-lightbox-toolbar {
    justify-content: flex-start;
    overflow-x: auto;
    padding: 10px 12px;
    min-height: 54px;
  }

  .portfolio-lightbox-help {
    display: none;
  }

  .portfolio-lightbox-caption {
    min-height: 64px;
    padding: 12px 18px 16px;
  }

  .portfolio-lightbox-caption strong {
    font-size: 16px;
  }

  .portfolio-lightbox-caption span {
    font-size: 12px;
  }
}


/* =========================================================
   About page v2 tweaks
   - 品牌核心3改為「持續的力量」
   - 墨暈點綴
   - 從作品到體驗搭配圖片
   ========================================================= */
.about-page main {
  position: relative;
  overflow: hidden;
}

.about-ink {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: .2;
  mix-blend-mode: multiply;
}

.about-ink-left {
  left: -140px;
  top: 140px;
  width: min(540px, 46vw);
  height: 760px;
  background: url("images/hero-left-ink-v42.png") left top / contain no-repeat;
  opacity: .18;
}

.about-ink-right {
  right: -120px;
  top: 840px;
  width: min(620px, 50vw);
  height: 760px;
  background: url("images/hero-right-ink.png") right top / contain no-repeat;
  opacity: .18;
}

.about-ink-bottom {
  left: -80px;
  bottom: 120px;
  width: min(520px, 42vw);
  height: 560px;
  background: url("images/hero-left-ink-v42.png") left bottom / contain no-repeat;
  opacity: .11;
  transform: rotate(10deg);
}

.about-section-ink {
  position: relative;
  z-index: 1;
}

.about-section-ink::after {
  content: "";
  position: absolute;
  right: 2vw;
  bottom: 20px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle at center, rgba(183,155,101,.08), transparent 70%);
  pointer-events: none;
}

.about-services-snapshot {
  position: relative;
  overflow: hidden;
}

.about-services-snapshot::before {
  content: "";
  position: absolute;
  left: -60px;
  top: 10px;
  width: 340px;
  height: 340px;
  background: url("images/hero-left-ink-v42.png") left top / contain no-repeat;
  opacity: .12;
  pointer-events: none;
}

.about-snapshot-grid {
  position: relative;
  z-index: 1;
}

.about-snapshot-card {
  display: flex !important;
  flex-direction: column;
  min-height: 390px !important;
  overflow: hidden;
  padding: 0 !important;
  background: rgba(255,255,255,.05) !important;
}

.about-snapshot-card:hover {
  transform: translateY(-5px);
}

.about-snapshot-image {
  position: relative;
  aspect-ratio: 1 / 0.82;
  overflow: hidden;
}

.about-snapshot-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(.95) contrast(1.02);
  transition: transform .45s ease;
}

.about-snapshot-card:hover .about-snapshot-image img {
  transform: scale(1.06);
}

.about-snapshot-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16,14,12,.02), rgba(16,14,12,.1));
}

.about-snapshot-copy {
  padding: 24px 24px 28px;
}

.about-snapshot-copy span {
  color: var(--gold);
  font-family: Cinzel, serif;
  letter-spacing: .22em;
  font-size: 12px;
}

.about-snapshot-copy h3 {
  margin: 12px 0 10px;
  color: #f7ead0;
  font-size: 23px;
  letter-spacing: .12em;
  font-weight: 500;
}

.about-snapshot-copy p {
  margin: 0;
  color: rgba(255,250,241,.72);
  line-height: 1.9;
}

@media(max-width:980px) {
  .about-ink-left {
    width: 320px;
    height: 520px;
    left: -120px;
  }

  .about-ink-right {
    width: 360px;
    height: 520px;
    right: -150px;
    top: 980px;
  }
}

@media(max-width:640px) {
  .about-ink-left {
    width: 260px;
    height: 380px;
    left: -100px;
    top: 220px;
    opacity: .12;
  }

  .about-ink-right {
    width: 250px;
    height: 360px;
    right: -120px;
    top: 1120px;
    opacity: .12;
  }

  .about-ink-bottom {
    width: 220px;
    height: 260px;
    left: -90px;
    bottom: 140px;
    opacity: .09;
  }

  .about-snapshot-card {
    min-height: 340px !important;
  }

  .about-snapshot-copy {
    padding: 20px 20px 24px;
  }
}


/* =========================================================
   About page v3 tweaks
   - 精選合作單行
   - 黑底區域更明顯的潑墨
   - 大筆 S 型筆刷引導視線
   ========================================================= */
.about-page .panel-dark {
  position: relative;
  overflow: hidden;
}

.about-page .panel-dark::before {
  content: "";
  position: absolute;
  left: -120px;
  top: -40px;
  width: 420px;
  height: 480px;
  background: url("images/hero-left-ink-v42.png") left top / contain no-repeat;
  opacity: .20;
  pointer-events: none;
  z-index: 0;
}

.about-page .panel-dark::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -80px;
  width: 460px;
  height: 520px;
  background: url("images/hero-right-ink.png") right bottom / contain no-repeat;
  opacity: .22;
  pointer-events: none;
  z-index: 0;
}

.about-quote-inner,
.about-services-snapshot .section-title,
.about-snapshot-grid {
  position: relative;
  z-index: 2;
}

.about-services-snapshot {
  position: relative;
  overflow: hidden;
}

.about-services-snapshot .section-title {
  margin-bottom: 34px;
}

.about-services-snapshot::before {
  content: "";
  position: absolute;
  left: 6%;
  top: -40px;
  width: min(520px, 42vw);
  height: 1120px;
  background: url("images/about-s-brush.svg") center top / contain no-repeat;
  opacity: .52;
  pointer-events: none;
  z-index: 0;
}

.about-services-snapshot::after {
  content: "";
  position: absolute;
  right: -80px;
  top: 140px;
  width: 360px;
  height: 460px;
  background: url("images/hero-right-ink.png") right top / contain no-repeat;
  opacity: .18;
  pointer-events: none;
  z-index: 0;
}

.about-snapshot-grid {
  padding-left: min(300px, 19vw);
}

.about-collab-list {
  flex-wrap: nowrap !important;
  justify-content: center;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 14px;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.about-collab-list span {
  min-width: auto;
  white-space: nowrap;
  flex: 0 0 auto;
  padding: 14px 18px;
  font-size: 16px;
}

@media (min-width: 1100px) {
  .about-collab-list {
    justify-content: space-between;
  }
}

@media(max-width:980px) {
  .about-services-snapshot::before {
    left: -2%;
    top: 20px;
    width: 300px;
    height: 860px;
    opacity: .42;
  }

  .about-snapshot-grid {
    padding-left: 90px;
  }

  .about-page .panel-dark::before {
    width: 280px;
    height: 340px;
    left: -90px;
    top: -20px;
  }

  .about-page .panel-dark::after {
    width: 320px;
    height: 380px;
    right: -100px;
    bottom: -40px;
  }
}

@media(max-width:640px) {
  .about-services-snapshot::before {
    left: -55px;
    top: 110px;
    width: 180px;
    height: 620px;
    opacity: .30;
  }

  .about-snapshot-grid {
    padding-left: 0;
  }

  .about-collab-list {
    justify-content: flex-start;
  }

  .about-page .panel-dark::before,
  .about-page .panel-dark::after {
    opacity: .14;
  }
}


/* =========================================================
   About page v4 fixes
   - 修正「從作品到體驗」卡片歪斜
   - 移除塊狀潑墨，改成較自然的墨暈
   - 以 inline SVG 做可見的大筆 S 型刷痕
   ========================================================= */

/* 先中和 v3 那種塊狀背景圖做法 */
.about-page .panel-dark::before,
.about-page .panel-dark::after,
.about-services-snapshot::after {
  background: none !important;
  content: none !important;
}

/* 黑底區域改成自然墨暈，不用塊狀圖片 */
.about-page .panel-dark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.about-page .panel-dark > * {
  position: relative;
  z-index: 2;
}

.about-page .panel-dark .ink-wash,
.about-page .panel-dark .ink-wash-2 {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(36px);
  mix-blend-mode: multiply;
  z-index: 0;
}

.about-page .panel-dark .ink-wash {
  left: -10%;
  top: 0;
  width: 36vw;
  height: 18vw;
  min-width: 280px;
  min-height: 150px;
  background:
    radial-gradient(circle at 42% 48%, rgba(18,16,15,.46) 0, rgba(18,16,15,.30) 24%, rgba(18,16,15,.12) 44%, rgba(18,16,15,0) 72%),
    radial-gradient(circle at 66% 42%, rgba(30,25,23,.18) 0, rgba(30,25,23,.08) 28%, rgba(30,25,23,0) 65%);
  opacity: .75;
}

.about-page .panel-dark .ink-wash-2 {
  right: -8%;
  bottom: -4%;
  width: 34vw;
  height: 19vw;
  min-width: 260px;
  min-height: 150px;
  background:
    radial-gradient(circle at 50% 52%, rgba(20,18,17,.42) 0, rgba(20,18,17,.24) 26%, rgba(20,18,17,.08) 48%, rgba(20,18,17,0) 74%),
    radial-gradient(circle at 34% 42%, rgba(44,40,38,.14) 0, rgba(44,40,38,.06) 28%, rgba(44,40,38,0) 60%);
  opacity: .72;
}

/* 若 about.html 中沒有這兩個 div，也用 pseudo 補上 */
.about-page .panel-dark::before,
.about-page .panel-dark::after {
  content: "" !important;
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(34px);
  z-index: 0;
  mix-blend-mode: multiply;
}
.about-page .panel-dark::before {
  left: -8%;
  top: -1%;
  width: 36vw;
  height: 18vw;
  min-width: 300px;
  min-height: 160px;
  background:
    radial-gradient(circle at 42% 48%, rgba(18,16,15,.42) 0, rgba(18,16,15,.28) 24%, rgba(18,16,15,.11) 42%, rgba(18,16,15,0) 72%);
  opacity: .78;
}
.about-page .panel-dark::after {
  right: -8%;
  bottom: -5%;
  width: 34vw;
  height: 19vw;
  min-width: 280px;
  min-height: 160px;
  background:
    radial-gradient(circle at 50% 52%, rgba(20,18,17,.38) 0, rgba(20,18,17,.22) 26%, rgba(20,18,17,.08) 48%, rgba(20,18,17,0) 74%);
  opacity: .72;
}

/* S 型視覺引導筆刷 */
.about-services-snapshot {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.about-flow-brush {
  position: absolute;
  left: 4.5%;
  top: 28px;
  width: min(300px, 24vw);
  height: 980px;
  z-index: 0;
  opacity: .95;
  pointer-events: none;
}

.about-flow-brush svg {
  width: 100%;
  height: 100%;
  display: block;
}

.about-flow-brush .brush-soft {
  fill: none;
  stroke: rgba(18,16,15,.18);
  stroke-width: 108;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#flowBlur);
}

.about-flow-brush .brush-main {
  fill: none;
  stroke: rgba(12,11,10,.48);
  stroke-width: 56;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.about-flow-brush .brush-edge {
  fill: none;
  stroke: rgba(0,0,0,.10);
  stroke-width: 16;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.about-flow-brush .brush-edge.light {
  stroke: rgba(255,244,230,.07);
  stroke-width: 8;
}

.about-flow-brush .brush-tail {
  fill: rgba(10,10,10,.18);
  filter: url(#flowBlur);
}
.about-flow-brush .brush-tail.small {
  fill: rgba(10,10,10,.12);
}

/* 修正卡片區塊歪掉：取消左側硬擠壓，改成正常整齊 grid */
.about-services-snapshot .section-title,
.about-snapshot-grid {
  position: relative;
  z-index: 2;
}

.about-snapshot-grid {
  padding-left: clamp(82px, 9vw, 160px) !important;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 26px;
}

.about-snapshot-card {
  min-height: 388px !important;
  height: 100%;
}

.about-snapshot-image {
  aspect-ratio: 1 / 0.78;
}

.about-snapshot-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.about-snapshot-copy p {
  flex: 1;
}

.about-collab-list {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  justify-content: flex-start;
  gap: 12px;
  padding-bottom: 6px;
}
.about-collab-list span {
  white-space: nowrap;
  flex: 0 0 auto;
}

/* 手機/平板調整 */
@media (max-width: 1100px) {
  .about-flow-brush {
    left: 2%;
    width: 220px;
    height: 860px;
    opacity: .88;
  }
  .about-snapshot-grid {
    padding-left: 64px !important;
    gap: 22px;
  }
}

@media (max-width: 820px) {
  .about-flow-brush {
    left: -18px;
    top: 90px;
    width: 140px;
    height: 700px;
    opacity: .72;
  }
  .about-snapshot-grid {
    padding-left: 0 !important;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .about-page .panel-dark::before {
    width: 240px;
    height: 120px;
    min-width: 0;
    min-height: 0;
    opacity: .55;
  }
  .about-page .panel-dark::after {
    width: 220px;
    height: 130px;
    min-width: 0;
    min-height: 0;
    opacity: .52;
  }
  .about-flow-brush {
    left: -34px;
    top: 140px;
    width: 110px;
    height: 620px;
    opacity: .55;
  }
}


/* =========================================================
   About page v5
   - 移除 S 型筆刷
   - 「從作品到體驗」縮小並排成一排
   - 精選合作品牌置中、等距排列
   ========================================================= */

/* 完全移除筆刷 */
.about-flow-brush {
  display: none !important;
}

/* 從作品到體驗：縮小、四格單排 */
.about-services-snapshot .section-title {
  margin-bottom: 28px;
}

.about-snapshot-grid {
  padding-left: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px !important;
  align-items: stretch;
}

.about-snapshot-card {
  min-height: 0 !important;
  height: auto !important;
  border-radius: 18px;
  overflow: hidden;
}

.about-snapshot-image {
  aspect-ratio: 1 / 0.72;
}

.about-snapshot-copy {
  padding: 16px 16px 18px !important;
  gap: 6px;
}

.about-snapshot-copy span {
  font-size: 11px;
  letter-spacing: .18em;
}

.about-snapshot-copy h3 {
  margin: 6px 0 4px;
  font-size: 18px;
  letter-spacing: .08em;
}

.about-snapshot-copy p {
  font-size: 13px;
  line-height: 1.7;
  margin: 0;
}

/* 精選合作品牌：置中、等距、整齊 */
.about-collab-list {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 14px !important;
  align-items: center;
  justify-items: center;
  overflow: visible !important;
  padding-bottom: 0 !important;
  max-width: 1100px;
  margin: 0 auto;
}

.about-collab-list span {
  width: 100%;
  text-align: center;
  white-space: nowrap;
  flex: unset !important;
  min-width: 0 !important;
  padding: 14px 12px;
}

/* 把前一版較重的導引墨感再收斂一些，保留自然墨暈 */
.about-services-snapshot::before,
.about-services-snapshot::after {
  content: none !important;
}

/* Responsive */
@media (max-width: 1100px) {
  .about-snapshot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px !important;
  }

  .about-collab-list {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
  }
}

@media (max-width: 680px) {
  .about-snapshot-grid {
    grid-template-columns: 1fr;
    gap: 16px !important;
  }

  .about-collab-list {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 12px !important;
  }

  .about-snapshot-copy {
    padding: 14px 14px 16px !important;
  }
}


/* =========================================================
   About page v6
   - 精選合作固定單排
   ========================================================= */
.about-collab-list {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 1fr !important;
  grid-template-columns: none !important;
  gap: 14px !important;
  align-items: center;
  justify-items: center;
  max-width: 1100px;
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px !important;
  -webkit-overflow-scrolling: touch;
}

.about-collab-list span {
  width: 100%;
  text-align: center;
  white-space: nowrap;
  min-width: 120px !important;
}

@media (max-width: 1100px) {
  .about-collab-list {
    grid-auto-columns: minmax(140px, 1fr) !important;
  }
}

@media (max-width: 680px) {
  .about-collab-list {
    grid-auto-columns: minmax(140px, 1fr) !important;
    gap: 12px !important;
  }
}


/* =========================================================
   Services page luxury refinement
   - 服務項目頁：更精品感版本
   ========================================================= */
.services-page .services-hero-page::before {
  opacity: .36;
  filter: grayscale(.06) contrast(1.12) saturate(.92);
}

.services-page .services-intro {
  background:
    radial-gradient(circle at 50% 0%, rgba(183,155,101,.08), transparent 42%),
    #fbf6ee;
}

.services-page .services-grid-section {
  background:
    radial-gradient(circle at 12% 8%, rgba(183,155,101,.10), transparent 28%),
    radial-gradient(circle at 88% 78%, rgba(20,18,17,.07), transparent 34%),
    linear-gradient(180deg, #fbf6ee, #f6efe4);
}

.services-page .service-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,250,241,.88), rgba(247,239,225,.78));
  border: 1px solid rgba(183,155,101,.42);
  box-shadow:
    0 24px 70px rgba(0,0,0,.085),
    inset 0 1px 0 rgba(255,255,255,.55);
}

.services-page .service-card::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(183,155,101,.16);
  pointer-events: none;
  z-index: 2;
}

.services-page .service-card:hover {
  transform: translateY(-7px);
  border-color: rgba(183,155,101,.78);
  box-shadow:
    0 34px 88px rgba(0,0,0,.13),
    inset 0 1px 0 rgba(255,255,255,.64);
}

.services-page .service-card-image {
  position: relative;
  background: #15110d;
}

.services-page .service-card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.18)),
    radial-gradient(circle at 70% 20%, rgba(255,238,189,.12), transparent 36%);
  pointer-events: none;
}

.services-page .service-card-image img {
  filter: saturate(.88) contrast(1.09) brightness(.96);
}

.services-page .service-card:hover .service-card-image img {
  filter: saturate(.98) contrast(1.14) brightness(1);
}



.services-page .service-card a {
  align-items: stretch;
}

.services-page .service-card-image {
  height: 100%;
  display: flex;
}

.services-page .service-card-image img {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
}

.services-page .service-card-custom .service-card-image img,
.services-page .service-card-live .service-card-image img {
  object-position: center top;
}

.services-page .service-card-handwrite .service-card-image img {
  object-position: center 38%;
}

.services-page .service-card-seminar .service-card-image img {
  object-position: center 28%;
}

.services-page .service-card-game .service-card-image img {
  object-position: center 22%;
}

.services-page .service-card-teaching .service-card-image img {
  object-position: center 58%;
}

.services-page .service-card-copy {
  background:
    linear-gradient(180deg, rgba(255,250,241,.0), rgba(255,250,241,.34));
}

.services-page .service-card-copy span {
  color: #a57b32;
  letter-spacing: .26em;
}

.services-page .service-card-copy h2 {
  color: #14100c;
}

.services-page .service-card-copy p {
  color: rgba(28,24,20,.74);
}

.services-page .service-card-copy li {
  color: rgba(28,24,20,.66);
}

.services-page .process-grid article {
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  border-color: rgba(223,201,149,.36);
}

.services-page .suitable-tags span {
  background: rgba(255,250,241,.82);
  border-color: rgba(183,155,101,.42);
}


/* =========================================================
   Course online link buttons
   ========================================================= */
.course-link-group {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.course-link-group .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}

@media(max-width:640px) {
  .course-link-group {
    gap: 10px;
  }
}


/* =========================================================
   Courses page v2 refinements
   - 線上課程圖片重製為清晰課程封面
   - 課程連結按鈕改為清楚、深色精品卡片
   ========================================================= */
.courses-page .online-course-image img {
  aspect-ratio: 1 / .62;
  object-fit: cover;
  filter: contrast(1.08) saturate(1.02) brightness(.98);
}

.course-link-group-clear {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.course-link-card {
  position: relative;
  display: block;
  padding: 18px 20px 18px 22px;
  color: #fffaf1;
  text-decoration: none;
  background:
    linear-gradient(135deg, rgba(248,241,226,.13), rgba(255,255,255,.04)),
    rgba(16,14,12,.72);
  border: 1px solid rgba(223,201,149,.52);
  box-shadow: 0 14px 36px rgba(0,0,0,.18);
  overflow: hidden;
  transition: transform .28s ease, border-color .28s ease, background .28s ease;
}

.course-link-card::after {
  content: "OPEN";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(223,201,149,.72);
  font-family: Cinzel, serif;
  font-size: 11px;
  letter-spacing: .2em;
}

.course-link-card:hover {
  transform: translateY(-3px);
  border-color: rgba(223,201,149,.86);
  background:
    linear-gradient(135deg, rgba(248,241,226,.18), rgba(255,255,255,.06)),
    rgba(18,15,12,.86);
}

.course-link-card b {
  display: block;
  margin-right: 72px;
  color: #fffaf1;
  font-size: 16px;
  letter-spacing: .06em;
  font-weight: 500;
}

.course-link-card span {
  display: block;
  margin-top: 5px;
  margin-right: 72px;
  color: rgba(255,250,241,.68);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .04em;
  font-family: inherit;
}

@media(max-width:640px) {
  .course-link-card {
    padding: 16px 18px;
  }

  .course-link-card::after {
    position: static;
    display: block;
    transform: none;
    margin-top: 10px;
  }

  .course-link-card b,
  .course-link-card span {
    margin-right: 0;
  }
}


/* =========================================================
   Courses page v3 uploaded online-course images
   ========================================================= */
.courses-page .online-course-card:nth-child(1) .online-course-image img {
  object-fit: cover;
  object-position: center center;
}

.courses-page .online-course-card:nth-child(2) .online-course-image {
  background: #123f60;
}

.courses-page .online-course-card:nth-child(2) .online-course-image img {
  object-fit: contain;
  object-position: center center;
  background: #123f60;
}


/* =========================================================
   In-person course page v6
   - 使用正式課程文字與新上傳課堂圖片
   ========================================================= */
.inperson-course-page-v6 .class-v6-hero {
  position: relative;
  min-height: 68vh;
  padding: 150px 6vw 96px;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  background: #f5f1e9;
}

.inperson-course-page-v6 .class-v6-hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(248,245,238,.10), rgba(248,245,238,.94)),
    url("images/inperson-class-hero-v123.jpg") center 47% / cover no-repeat;
  opacity: .44;
  filter: contrast(1.06) saturate(.96);
}

.inperson-course-page-v6 .class-v6-hero::after {
  content: "";
  position: absolute;
  left: -10vw;
  bottom: -16vh;
  width: min(760px, 72vw);
  height: min(680px, 72vh);
  background: url("images/hero-left-ink-v42.png") left bottom / contain no-repeat;
  opacity: .45;
  pointer-events: none;
}

.inperson-course-page-v6 .class-v6-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
}

.inperson-course-page-v6 .class-v6-kicker,
.inperson-course-page-v6 .class-v6-opening-copy span {
  margin: 0 0 22px;
  font-family: Cinzel, serif;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: .32em;
}

.inperson-course-page-v6 .class-v6-hero h1 {
  margin: 0 0 20px;
  font-size: clamp(42px, 7vw, 88px);
  letter-spacing: .16em;
  font-weight: 500;
}

.inperson-course-page-v6 .class-v6-hero p {
  margin: 0 auto;
  max-width: 780px;
  color: rgba(20,20,20,.72);
  font-size: 18px;
  line-height: 2;
  letter-spacing: .075em;
}

.inperson-course-page-v6 .class-v6-actions {
  margin-top: 34px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.inperson-course-page-v6 .class-v6-opening {
  padding: 92px 7vw 76px;
  display: grid;
  grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr);
  gap: 54px;
  align-items: center;
  background: #fbf6ee;
}

.inperson-course-page-v6 .class-v6-opening-copy h2 {
  margin: 0 0 18px;
  font-size: clamp(34px, 4vw, 54px);
  letter-spacing: .14em;
  font-weight: 500;
}

.inperson-course-page-v6 .class-v6-opening-copy p {
  color: #3b342d;
  line-height: 2.08;
  font-size: 17px;
}

.inperson-course-page-v6 .class-v6-opening-gallery {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 16px;
  align-items: end;
}

.inperson-course-page-v6 .class-v6-opening-gallery img {
  width: 100%;
  object-fit: cover;
  box-shadow: 0 22px 64px rgba(0,0,0,.10);
  border: 1px solid rgba(183,155,101,.28);
}

.inperson-course-page-v6 .class-v6-opening-gallery img:first-child { aspect-ratio: 1 / 1.15; }
.inperson-course-page-v6 .class-v6-opening-gallery img:last-child { aspect-ratio: 1 / .86; }

.inperson-course-page-v6 .class-v6-detail-section {
  padding: 86px 6vw 96px;
  background:
    radial-gradient(circle at 12% 8%, rgba(183,155,101,.10), transparent 28%),
    #f8f1e5;
}

.inperson-course-page-v6 .class-v6-info-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 22px;
}

.inperson-course-page-v6 .class-v6-info-card {
  padding: 32px 30px 34px;
  background: rgba(255,250,241,.80);
  border: 1px solid rgba(183,155,101,.34);
  box-shadow: 0 18px 50px rgba(0,0,0,.06);
}

.inperson-course-page-v6 .class-v6-info-card.class-v6-wide { grid-column: 1 / -1; }

.inperson-course-page-v6 .class-v6-info-card b {
  display: block;
  margin-bottom: 24px;
  color: var(--gold);
  font-family: Cinzel, serif;
  letter-spacing: .18em;
}

.inperson-course-page-v6 .class-v6-info-card h3 {
  margin: 0 0 14px;
  font-size: 24px;
  letter-spacing: .12em;
  font-weight: 500;
}

.inperson-course-page-v6 .class-v6-info-card p {
  margin: 0 0 12px;
  color: rgba(30,30,30,.70);
  line-height: 1.95;
}

.inperson-course-page-v6 .class-v6-sublist {
  margin: 20px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}

.inperson-course-page-v6 .class-v6-sublist div {
  padding: 18px 20px;
  background: rgba(255,255,255,.44);
  border: 1px solid rgba(183,155,101,.20);
}

.inperson-course-page-v6 .class-v6-sublist strong {
  display: block;
  margin-bottom: 6px;
  color: #1d1712;
  letter-spacing: .08em;
}

.inperson-course-page-v6 .class-v6-tags {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.inperson-course-page-v6 .class-v6-tags span {
  padding: 10px 16px;
  background: rgba(183,155,101,.12);
  border: 1px solid rgba(183,155,101,.28);
  color: #201a14;
  letter-spacing: .04em;
}

.inperson-course-page-v6 .class-v6-experience {
  padding: 88px 6vw 98px;
}

.inperson-course-page-v6 .class-v6-experience-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 24px;
}

.inperson-course-page-v6 .class-v6-experience-grid article {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(223,201,149,.32);
  box-shadow: 0 24px 70px rgba(0,0,0,.18);
  overflow: hidden;
}

.inperson-course-page-v6 .class-v6-experience-grid img {
  width: 100%;
  aspect-ratio: 1 / .76;
  object-fit: cover;
  display: block;
}

.inperson-course-page-v6 .class-v6-experience-grid div {
  padding: 28px 26px 30px;
}

.inperson-course-page-v6 .class-v6-experience-grid h3 {
  margin: 0 0 12px;
  color: #f7ead0;
  font-size: 22px;
  letter-spacing: .12em;
  font-weight: 500;
}

.inperson-course-page-v6 .class-v6-experience-grid p {
  margin: 0;
  color: rgba(255,250,241,.74);
  line-height: 1.9;
}

.inperson-course-page-v6 .class-v6-gallery-section {
  padding: 86px 6vw 96px;
  background: #fbf6ee;
}

.inperson-course-page-v6 .class-v6-gallery {
  max-width: 1220px;
  margin: 0 auto;
  columns: 4 220px;
  column-gap: 18px;
}

.inperson-course-page-v6 .class-v6-gallery img {
  width: 100%;
  display: block;
  break-inside: avoid;
  margin: 0 0 18px;
  border: 1px solid rgba(183,155,101,.22);
  box-shadow: 0 18px 48px rgba(0,0,0,.07);
}

.inperson-course-page-v6 .class-v6-cta {
  padding: 88px 6vw 98px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255,250,241,.75), rgba(248,241,229,.94)),
    #fffaf1;
}

.inperson-course-page-v6 .class-v6-cta h2 {
  margin: 0 auto 16px;
  max-width: 860px;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.65;
  letter-spacing: .14em;
  font-weight: 500;
}

.inperson-course-page-v6 .class-v6-cta p {
  margin: 0 auto 30px;
  max-width: 720px;
  color: rgba(30,30,30,.68);
  line-height: 2;
}

@media(max-width:980px) {
  .inperson-course-page-v6 .class-v6-opening,
  .inperson-course-page-v6 .class-v6-info-grid,
  .inperson-course-page-v6 .class-v6-sublist,
  .inperson-course-page-v6 .class-v6-experience-grid {
    grid-template-columns: 1fr;
  }
}

@media(max-width:640px) {
  .inperson-course-page-v6 .class-v6-hero {
    min-height: 58vh;
    padding: 124px 22px 72px;
  }

  .inperson-course-page-v6 .class-v6-hero h1 { letter-spacing: .1em; }
  .inperson-course-page-v6 .class-v6-hero p { font-size: 16px; }

  .inperson-course-page-v6 .class-v6-opening,
  .inperson-course-page-v6 .class-v6-detail-section,
  .inperson-course-page-v6 .class-v6-experience,
  .inperson-course-page-v6 .class-v6-gallery-section,
  .inperson-course-page-v6 .class-v6-cta {
    padding-left: 22px;
    padding-right: 22px;
  }

  .inperson-course-page-v6 .class-v6-opening-gallery { grid-template-columns: 1fr; }
  .inperson-course-page-v6 .class-v6-info-card { padding: 28px 24px; }
}

/* Course hub final integration */
.course-grid article > a{display:block;color:inherit;text-decoration:none;height:100%;}
.course-grid article > a img{width:100%;}



/* Portfolio commission entry beside the final category tab — v26 */
.portfolio-tabs-pages {
  align-items: center;
}
.portfolio-tabs-pages .portfolio-commission-link {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 142px;
  height: 34px;
  padding: 0 14px;
  margin-left: 8px;
  border: 1px solid #b79b65;
  border-radius: 7px;
  background: #11100f;
  color: #d9c08a;
  font-size: 12.5px;
  line-height: 1;
  letter-spacing: .05em;
  text-align: center;
  white-space: nowrap;
  box-shadow: none;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.portfolio-tabs-pages .portfolio-commission-link:hover {
  background: #1b1814;
  color: #f0d8a4;
  transform: translateY(-1px);
}
.portfolio-tabs-pages .portfolio-commission-link::after { display: none; }
@media (max-width: 900px) {
  .portfolio-tabs-pages .portfolio-commission-link {
    width: 136px;
    height: 32px;
    padding: 0 12px;
    margin-left: 2px;
    font-size: 11.5px;
    border-radius: 6px;
  }
}


/* v31: inquiry links, contact modal and video showcase */
.service-grid > a.service-grid-link{display:block}
.service-grid > a.service-grid-link::before{content:'✦';display:block;color:var(--gold);font-size:32px;margin-bottom:10px}
.service-grid > a.service-grid-link:hover b{color:#fff3d4}
.inquiry-link-actions{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap}
.inquiry-link-button{min-width:184px;height:44px;padding:0 24px;display:inline-flex;align-items:center;justify-content:center;background:#0d0d0c;color:#d9bd82;border:1px solid #b99a64;border-radius:8px;font-size:14px;font-weight:700;letter-spacing:.08em;line-height:1;transition:transform .22s ease,background .22s ease,color .22s ease,box-shadow .22s ease}
.inquiry-link-button:hover{transform:translateY(-2px);background:#171510;color:#f3ddb0;box-shadow:0 8px 24px rgba(0,0,0,.14)}
.services-inquiry-links{padding:8px 6vw 62px;text-align:center;background:#fbf6ee}
.services-inquiry-links p{margin:0 0 18px;color:#685e50;font-size:14px}
.video-showcase{padding:74px 7vw;background:#f8f1e5}
.video-showcase-link{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);align-items:stretch;border:1px solid rgba(183,155,101,.34);background:#0d0d0c;color:#f4ead6;overflow:hidden}
.video-showcase-image{position:relative;min-height:360px;overflow:hidden}
.video-showcase-image::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.08),rgba(0,0,0,.42))}
.video-showcase-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.video-showcase-link:hover .video-showcase-image img{transform:scale(1.035)}
.video-play{position:absolute;z-index:2;left:50%;top:50%;width:72px;height:72px;transform:translate(-50%,-50%);display:grid;place-items:center;padding-left:5px;border:1px solid rgba(217,189,130,.9);border-radius:50%;background:rgba(11,11,10,.76);color:#e1c687;font-size:25px}
.video-showcase-copy{padding:52px 42px;display:flex;flex-direction:column;justify-content:center}
.video-kicker{margin:0 0 12px;color:#c8a965;font-family:Cinzel,serif;font-size:11px;letter-spacing:.18em}
.video-showcase-copy h2{margin:0 0 18px;color:#ecd7aa;font-size:34px;letter-spacing:.18em}
.video-showcase-copy>p:not(.video-kicker){margin:0 0 28px;color:rgba(255,250,241,.75);line-height:2}
.video-youtube-link{color:#d9bd82;font-weight:700;letter-spacing:.08em}
.contact-modal-open{overflow:hidden}
.contact-options-modal{position:fixed;z-index:1000;inset:0;display:none;place-items:center;padding:22px}
.contact-options-modal.is-open{display:grid}
.contact-options-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(4px)}
.contact-options-dialog{position:relative;z-index:1;width:min(520px,94vw);max-height:calc(100vh - 44px);overflow:auto;padding:38px 34px 34px;text-align:center;background:#fffaf1;border:1px solid #b99a64;box-shadow:0 24px 70px rgba(0,0,0,.35)}
.contact-options-close{position:absolute;right:14px;top:10px;width:36px;height:36px;border:0;background:transparent;color:#3b342d;font-size:28px;cursor:pointer}
.contact-options-kicker{margin:0 0 8px;color:#9b7a3e;font-family:Cinzel,serif;font-size:11px;letter-spacing:.18em}
.contact-options-dialog h2{margin:0 0 10px;font-size:30px;letter-spacing:.14em}
.contact-options-intro{margin:0 auto 22px;color:#675d50;line-height:1.8}
.contact-line-qr{width:210px;margin:0 auto 24px;padding:14px;display:grid;justify-items:center;gap:5px;border:1px solid rgba(183,155,101,.34);background:#fff}
.contact-line-qr img{width:150px;height:150px}
.contact-line-qr strong{font-size:14px}
.contact-line-qr span{color:#887348;font-size:13px}
@media(max-width:900px){
.video-showcase{padding:46px 18px}.video-showcase-link{grid-template-columns:1fr}.video-showcase-image{min-height:230px}.video-showcase-copy{padding:34px 26px 38px}.video-showcase-copy h2{font-size:27px}.contact-options-dialog{padding:34px 20px 26px}.inquiry-link-button{min-width:160px;height:42px;padding:0 18px;font-size:13px}}


/* v32: contact modal scroll and spacing fixes */
.contact-options-modal{
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  align-items:start;
  padding:22px;
}
.contact-options-modal.is-open{display:grid;}
.contact-options-dialog{
  margin:auto;
  max-height:none;
  overflow:visible;
}
@media (max-width:640px){
  .contact-options-modal{padding:12px 12px 28px;}
  .contact-options-dialog{
    width:min(100%,520px);
    margin:12px auto 28px;
    padding:34px 18px 26px;
  }
  .contact-line-qr img{max-width:min(250px,72vw);height:auto;}
}

/* v32: service inquiry links now sit above the calligraphy service section */
.services-page .services-inquiry-links{
  margin:0;
  padding:34px 7vw 30px;
  background:#f8f1e5;
}
.services-page .services-inquiry-links + .services-intro{padding-top:34px;}


/* v33: compact video, reliable contact modal scrolling, higher service inquiry buttons */
.video-showcase{padding:48px 7vw;}
.video-showcase-link{max-width:980px;grid-template-columns:minmax(0,1.28fr) minmax(270px,.72fr);}
.video-showcase-image{min-height:260px;max-height:320px;}
.video-showcase-copy{padding:34px 32px;}
.video-showcase-copy h2{font-size:29px;margin-bottom:13px;}
.video-showcase-copy>p:not(.video-kicker){margin-bottom:20px;line-height:1.8;}
.video-play{width:58px;height:58px;font-size:20px;}

/* The dialog is the only scroll container; this is more reliable on short screens and mobile browsers. */
.contact-options-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:1000;
  padding:16px;
  align-items:center;
  justify-items:center;
  overflow:hidden;
}
.contact-options-modal.is-open{display:grid;}
.contact-options-dialog{
  box-sizing:border-box;
  width:min(520px,calc(100vw - 32px));
  max-height:calc(100dvh - 32px);
  margin:0;
  padding:34px 28px 28px;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
}
.contact-line-qr{width:190px;margin-bottom:18px;padding:10px;}
.contact-line-qr img{width:128px;height:128px;}
.contact-options-actions{padding-bottom:4px;}

.services-page .services-inquiry-links{
  position:relative;
  z-index:3;
  margin-top:-28px;
  padding:10px 7vw 18px;
  background:transparent;
}
.services-page .services-inquiry-links + .services-intro{padding-top:30px;}

@media(max-width:640px){
  .video-showcase{padding:34px 16px;}
  .video-showcase-link{grid-template-columns:1fr;}
  .video-showcase-image{min-height:190px;max-height:220px;}
  .video-showcase-copy{padding:25px 22px 28px;}
  .video-showcase-copy h2{font-size:25px;}
  .contact-options-modal{padding:8px;}
  .contact-options-dialog{
    width:calc(100vw - 16px);
    max-height:calc(100dvh - 16px);
    padding:30px 16px 22px;
  }
  .contact-line-qr{width:174px;}
  .contact-line-qr img{width:116px;height:116px;}
  .services-page .services-inquiry-links{margin-top:-20px;padding:8px 18px 14px;}
}


/* v34: dedicated contact page and slightly larger video showcase */
.video-showcase{padding:42px 5vw;}
.video-showcase-link{max-width:1100px;grid-template-columns:minmax(0,1.32fr) minmax(300px,.68fr);}
.video-showcase-image{min-height:310px;max-height:370px;}
.video-showcase-copy{padding:40px 38px;}

.contact-page{min-height:100vh;background:#f7f0e5;padding-top:110px;}
.contact-page-main{padding:56px 7vw 90px;}
.contact-page-heading{text-align:center;max-width:720px;margin:0 auto 38px;}
.contact-page-heading .eyebrow{margin:0 0 10px;color:#a48245;font-family:Cinzel,serif;font-size:12px;letter-spacing:.22em;}
.contact-page-heading h1{margin:0 0 16px;color:#201c18;font-size:42px;letter-spacing:.15em;font-weight:500;}
.contact-page-heading p{margin:0;color:#6b6154;line-height:1.9;}
.contact-methods{max-width:980px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:stretch;}
.contact-method-card{background:#fffaf2;border:1px solid rgba(183,155,101,.42);padding:34px;box-shadow:0 16px 42px rgba(70,50,20,.08);}
.contact-method-card h2{margin:0 0 12px;font-size:25px;letter-spacing:.1em;font-weight:500;}
.contact-method-card>p{margin:0 0 25px;color:#706454;line-height:1.85;}
.contact-line-card{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.contact-line-card img{width:min(220px,70vw);height:auto;padding:12px;background:#fff;border:1px solid rgba(183,155,101,.3);}
.contact-line-card strong{margin-top:15px;font-size:17px;letter-spacing:.08em;}
.contact-line-card span{margin-top:5px;color:#8b7449;}
.contact-line-direct{margin-top:20px;min-width:210px;}
.contact-inquiry-list{display:grid;gap:16px;margin-top:22px;}
.contact-inquiry-choice{display:block;padding:22px 24px;background:#0d0d0c;color:#e0c58a;border:1px solid #b99a64;border-radius:9px;transition:transform .22s ease,background .22s ease,box-shadow .22s ease;}
.contact-inquiry-choice:hover{transform:translateY(-2px);background:#18150f;box-shadow:0 10px 28px rgba(0,0,0,.14);}
.contact-inquiry-choice b{display:block;margin-bottom:7px;font-size:17px;letter-spacing:.08em;}
.contact-inquiry-choice span{display:block;color:rgba(255,248,232,.68);font-size:13px;line-height:1.7;}
.contact-page-back{display:flex;justify-content:center;margin-top:34px;}
@media(max-width:900px){
  .video-showcase{padding:38px 18px;}.video-showcase-link{grid-template-columns:1fr;}.video-showcase-image{min-height:250px;max-height:300px;}
  .contact-page{padding-top:82px;}.contact-page-main{padding:42px 18px 70px;}.contact-page-heading h1{font-size:34px;}.contact-methods{grid-template-columns:1fr;}.contact-method-card{padding:28px 22px;}
}
@media(max-width:640px){
  .video-showcase{padding:30px 14px;}.video-showcase-image{min-height:220px;max-height:260px;}.video-showcase-copy{padding:28px 23px 31px;}
  .contact-page-heading h1{font-size:29px;}.contact-page-heading p{font-size:14px;}.contact-method-card h2{font-size:22px;}
}


/* v35 refinements */
.brand-no-wrap{white-space:nowrap;}
.work-image-link{display:block;overflow:hidden;}
.work-image-link img{display:block;width:100%;transition:transform .55s ease,filter .4s ease;}
.work-image-link:hover img{transform:scale(1.035);filter:brightness(1.04);}
.about-origin-copy{line-height:2.05;letter-spacing:.045em;}
.service-grid-link{color:inherit;text-decoration:none;}


/* v36 unified footer */
.footer-unified{display:grid;grid-template-columns:1.35fr repeat(3,minmax(150px,1fr));gap:36px 42px;padding:58px 6vw 24px;background:#0d0d0c;color:#e8dfd1;border-top:1px solid rgba(192,159,96,.34);align-items:start;}
.footer-unified .footer-brand img{width:min(190px,78%);height:auto;margin-bottom:15px;filter:brightness(1.08);}
.footer-unified .footer-brand p{margin:0 0 10px;max-width:290px;color:#c8bcaa;line-height:1.8;font-size:14px;}
.footer-unified .footer-brand small{font-family:Cinzel,serif;letter-spacing:.14em;color:#a98d59;font-size:10px;}
.footer-unified .footer-column{display:flex;flex-direction:column;gap:9px;}
.footer-unified h3{margin:0 0 8px;color:#d1b374;font-size:15px;letter-spacing:.08em;}
.footer-unified a,.footer-unified span{color:#d8cfc2;text-decoration:none;font-size:13px;line-height:1.65;transition:color .2s ease;}
.footer-unified a:hover{color:#d6b66f;}
.footer-unified .footer-bottom{grid-column:1/-1;display:flex;justify-content:space-between;gap:20px;align-items:center;margin-top:15px;padding-top:20px;border-top:1px solid rgba(192,159,96,.19);}
.footer-unified .footer-bottom span,.footer-unified .footer-bottom a{font-size:11px;color:#928778;letter-spacing:.05em;}
.lang a{color:inherit;text-decoration:none}.lang a:hover{color:#b69252}
@media(max-width:900px){.footer-unified{grid-template-columns:1fr 1fr;gap:30px 24px;padding:44px 24px 22px}.footer-unified .footer-brand{grid-column:1/-1}.footer-unified .footer-bottom{flex-direction:column;align-items:flex-start}.footer-unified .footer-column:last-of-type{grid-column:1/-1}}
@media(max-width:520px){.footer-unified{grid-template-columns:1fr}.footer-unified .footer-brand,.footer-unified .footer-column:last-of-type{grid-column:auto}}

/* inquiry thank-you */
.thankyou-page{min-height:100vh;background:#f5efe5;color:#18130e}.thankyou-main{min-height:72vh;display:grid;place-items:center;padding:150px 22px 80px;background:radial-gradient(circle at 50% 8%,rgba(187,151,84,.16),transparent 34%)}
.thankyou-card{width:min(720px,100%);padding:54px 48px;text-align:center;background:#fffaf2;border:1px solid rgba(161,128,68,.3);box-shadow:0 25px 65px rgba(45,34,20,.09)}
.thankyou-mark{width:62px;height:62px;margin:0 auto 22px;border:1px solid #b18a45;border-radius:50%;display:grid;place-items:center;color:#a57d38;font-size:27px}.thankyou-card .kicker{font-family:Cinzel,serif;letter-spacing:.18em;color:#a57d38;font-size:11px}.thankyou-card h1{font-size:36px;margin:12px 0 18px}.thankyou-card p{line-height:1.9;color:#625748}.thankyou-no{display:none;margin:22px auto 0;padding:12px 18px;background:#171512;color:#ddc38b;font-size:13px}.thankyou-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:30px}.thankyou-actions .btn{min-width:185px}
@media(max-width:600px){.thankyou-main{padding:115px 14px 55px}.thankyou-card{padding:40px 22px}.thankyou-card h1{font-size:29px}.thankyou-actions .btn{width:100%}}

/* English single-page */
.en-page{background:#f7f2e9;color:#18130e}.en-section{padding:85px 6vw}.en-section-inner{width:min(1180px,100%);margin:auto}.en-lead{max-width:850px;margin:18px auto 0;text-align:center;line-height:1.9;color:#655a4c}.en-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:42px}.en-card{background:#fffaf2;border:1px solid rgba(154,123,70,.24);padding:28px;box-shadow:0 14px 40px rgba(45,34,20,.05)}.en-card h3{margin:0 0 12px}.en-card p{line-height:1.75;color:#655a4c}.en-card a{color:#987438}.en-dark{background:#11100e;color:#eee5d8}.en-dark .en-lead,.en-dark .en-card p{color:#c9bead}.en-dark .en-card{background:#191815;border-color:rgba(196,158,89,.38)}.en-hero{min-height:86vh;display:grid;place-items:center;text-align:center;padding:150px 24px 90px;background:linear-gradient(rgba(6,6,5,.42),rgba(6,6,5,.56)),url('images/home-work-live-writing-3.jpg') center/cover;color:#fff}.en-hero h1{font-family:Cinzel,serif;font-size:clamp(43px,7vw,88px);letter-spacing:.06em;margin:0}.en-hero p{max-width:720px;font-size:18px;line-height:1.8;margin:20px auto 30px}.en-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}.en-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:38px}.en-gallery a{position:relative;overflow:hidden;aspect-ratio:4/5}.en-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .4s}.en-gallery a:hover img{transform:scale(1.04)}.en-gallery span{position:absolute;left:0;right:0;bottom:0;padding:28px 15px 14px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.75));font-weight:700}.en-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:38px}.en-contact-grid .en-card{padding:36px}.en-page .footer-unified .footer-column h3{color:#d1b374}
@media(max-width:900px){.en-grid-3{grid-template-columns:1fr}.en-gallery{grid-template-columns:1fr 1fr}.en-contact-grid{grid-template-columns:1fr}.en-section{padding:62px 22px}}

/* v37 homepage refinements */
.hero .ink-left{
  left:-5vw;
  bottom:-2vh;
  width:min(56vw,760px);
  height:min(90vh,720px);
  background:url('images/hero-left-ink-v42.png') left bottom/contain no-repeat;
  opacity:1;
  filter:none;
}

.brand-grid{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:18px 34px;
  max-width:1040px;
  margin:0 auto;
}
.brand-grid div{
  flex:0 0 auto;
  min-height:auto;
  padding:0 4px;
}
.brand-grid .brand-no-wrap{white-space:nowrap;}

.about-origin-wrap{
  display:grid;
  gap:14px;
}
.about-origin-en{
  max-width:700px;
  line-height:1.9;
  letter-spacing:.02em;
}

.video-showcase{
  padding:30px 6vw 34px;
}
.video-showcase-link{
  max-width:1140px;
  grid-template-columns:minmax(0,1.4fr) minmax(320px,.72fr);
}
.video-showcase-image{
  min-height:360px;
}
.video-showcase-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:28px 34px;
}
.video-showcase-copy p{
  line-height:1.9;
}

@media (max-width: 900px){
  .hero .ink-left{
    left:-18vw;
    bottom:-3vh;
    width:78vw;
    height:58vh;
  }
  .brand-grid{
    gap:14px 22px;
  }
  .video-showcase{
    padding:26px 18px 30px;
  }
  .video-showcase-link{
    grid-template-columns:1fr;
  }
  .video-showcase-image{
    min-height:260px;
  }
  .video-showcase-copy{
    padding:26px 24px 28px;
  }
}

/* v38: restore original left ink size while keeping clearer rendering */
.hero .ink-left{
  left:-7vw;
  bottom:-8vh;
  width:min(58vw,740px);
  height:min(74vh,560px);
  background-size:100% 100%;
  filter:none;
}
@media (max-width: 900px){
  .hero .ink-left{
    left:-16vw;
    bottom:-8vh;
    width:96vw;
    height:44vh;
    background-size:100% 100%;
  }
}


/* v39: homepage image finishing */
.hero .ink-left{
  background-image:url('images/hero-left-ink-v43-white.png');
  image-rendering:auto;
  transform:translateZ(0);
  backface-visibility:hidden;
}
.work-card .work-img-custom{
  object-position:center center;
}
.work-card .work-img-live{
  object-position:center 72%;
}

/* v41: force newly generated ink asset and bypass old cache */
.hero .ink-left{background-image:url('images/hero-left-ink-v43-white.png?v=43')!important;}


/* v42: homepage left ink + featured image refinements */
.hero .ink-left{background-image:url('images/hero-left-ink-v43-white.png?v=43')!important;background-position:left bottom!important;background-size:100% 100%!important;}
.work-card .work-img-custom{object-position:center center;}
.work-card .work-img-live{object-position:center 82%;}


/* v43: remove gray gradient from homepage hero */
.hero{background:#fff!important;}
.hero .ink-left{
  background-image:url('images/hero-left-ink-v43-white.png?v=43')!important;
  background-position:left bottom!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
  opacity:1!important;
  filter:none!important;
}

/* v44: homepage live-writing photo and About section refinements */
.work-card .work-img-live{
  object-position:center 50%!important;
}
.about{
  grid-template-columns:minmax(380px,.95fr) minmax(0,1.05fr);
  gap:clamp(42px,5vw,76px);
  align-items:stretch;
  padding-left:max(6vw,calc((100vw - 1360px)/2));
  padding-right:max(6vw,calc((100vw - 1360px)/2));
}
.about-image{
  min-width:0;
  height:100%;
}
.about-image img{
  width:100%;
  height:100%;
  min-height:470px;
  aspect-ratio:auto;
  object-fit:cover;
  object-position:center center;
}
.about-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:4px 0 0;
}
.about-origin-wrap{
  width:100%;
  max-width:760px;
  gap:16px;
}
.about-origin-copy{
  margin-top:0;
  margin-bottom:0;
  font-size:17px!important;
  line-height:2.05!important;
  letter-spacing:.035em!important;
}
.about-origin-en{
  margin:0;
  max-width:760px;
  font-size:15.5px!important;
  line-height:1.9!important;
}
.about-copy > .btn{
  align-self:flex-start;
  margin-top:auto;
  margin-left:0;
}
@media (max-width:900px){
  .about{
    grid-template-columns:1fr;
    gap:30px;
    padding-left:22px;
    padding-right:22px;
  }
  .about-image img{
    min-height:0;
    height:auto;
    aspect-ratio:1.4/1;
  }
  .about-copy > .btn{
    margin-top:24px;
  }
  .about-origin-copy{
    font-size:16px!important;
    line-height:1.95!important;
  }
  .about-origin-en{
    font-size:14.5px!important;
  }
}
@media (max-width:560px){
  .about-origin-copy br{
    display:none;
  }
  .about-origin-copy{
    line-height:1.9!important;
  }
}



/* v45: About paragraph line breaks and English vertical alignment */
.about-origin-wrap{
  gap:7px;
}
.about-origin-en{
  margin-top:-3px;
}
@media (max-width:900px){
  .about-origin-wrap{gap:8px;}
  .about-origin-en{margin-top:-2px;}
}

/* =========================================================
   About page v7
   - 更新書寫者與「我們相信」內容
   - 移除關於頁精選合作
   - CTA 標語固定單行顯示
   ========================================================= */
.about-page .about-cta h2 {
  max-width: none;
  white-space: nowrap;
  font-size: clamp(24px, 3.3vw, 44px);
  letter-spacing: .10em;
}

@media (max-width: 680px) {
  .about-page .about-cta h2 {
    font-size: clamp(13px, 4.2vw, 18px);
    letter-spacing: .02em;
    line-height: 1.5;
  }
}



/* === v51 portfolio refinements === */
/* Match the visual height used by the About and Services inner-page heroes. */
.portfolio-hero {
  min-height: 62vh;
  padding: 150px 6vw 92px;
}

.portfolio-hero-inner {
  max-width: 780px;
  padding: 18px 42px 16px;
}

.portfolio-hero-inner::before,
.portfolio-hero-inner::after {
  width: 72px;
  margin-bottom: 12px;
}

.portfolio-hero-inner::after {
  margin-top: 14px;
  margin-bottom: 0;
}

.portfolio-kicker {
  margin-bottom: 12px;
}

.portfolio-hero h1 {
  font-size: clamp(44px, 6.5vw, 78px);
  margin-bottom: 12px;
}

.portfolio-hero p {
  max-width: 650px;
  font-size: 16px;
  line-height: 1.8;
}

/* Fine-tune the three new category images without changing the card design. */
.portfolio-category-card:nth-child(1) img {
  object-position: center center;
}

.portfolio-category-card:nth-child(6) img {
  object-position: center 48%;
}

.portfolio-category-card:nth-child(7) img {
  object-position: center 50%;
}

/* Keep a compact Facebook identity header visible, while trimming only the excess top space. */
.facebook-feed-wrap {
  height: 682px;
  padding: 0;
  overflow: hidden;
}

.facebook-feed-wrap iframe {
  height: 826px !important;
  transform: translateY(-18px);
  transform-origin: top center;
}

@media(max-width:760px) {
  .portfolio-hero {
    min-height: 56vh;
    padding: 124px 22px 72px;
  }

  .portfolio-hero-inner {
    padding: 16px 20px 14px;
  }

  .portfolio-hero h1 {
    font-size: clamp(40px, 12vw, 62px);
  }

  .portfolio-hero p {
    font-size: 15px;
  }

  .facebook-feed-wrap {
    height: 662px;
    padding: 0;
  }
}

/* === v53 Facebook feed crop refinement ===
   Remove the duplicated Page Plugin header while keeping the larger
   author avatar inside the first timeline post fully visible. */
.facebook-feed-wrap {
  height: 602px;
  padding: 0;
  overflow: hidden;
}

.facebook-feed-wrap iframe {
  height: 826px !important;
  transform: translateY(-102px);
  transform-origin: top center;
}

@media(max-width:760px) {
  .facebook-feed-wrap {
    height: 582px;
  }
}


/* === v54 dark portfolio category presentation ===
   A black exhibition-wall treatment for a more premium gallery feel. */
.portfolio-category-index {
  position: relative;
  background:
    radial-gradient(circle at 12% 0%, rgba(183,155,101,.13), transparent 34%),
    radial-gradient(circle at 92% 100%, rgba(255,255,255,.06), transparent 36%),
    linear-gradient(180deg, #11110f 0%, #080808 100%);
  border-top: 1px solid rgba(183,155,101,.28);
  border-bottom: 1px solid rgba(183,155,101,.22);
}

.portfolio-category-index .section-title h2 {
  color: #f0e7d5;
}

.portfolio-category-index .section-title p {
  color: #cdb77e;
}

.portfolio-category-index .section-title > span {
  background: rgba(183,155,101,.72);
}

.portfolio-category-index .portfolio-category-card {
  border-color: rgba(183,155,101,.22);
  background: #161513;
  box-shadow: 0 20px 46px rgba(0,0,0,.38);
}

.portfolio-category-index .portfolio-category-card::before {
  border-color: rgba(255,248,231,.28);
}

.portfolio-category-index .portfolio-category-card:hover {
  border-color: rgba(202,175,111,.52);
  box-shadow: 0 28px 58px rgba(0,0,0,.52), 0 0 0 1px rgba(183,155,101,.08);
}

/* Custom title and live-writing card focal points. */
.portfolio-category-card:nth-child(2) img {
  object-position: center 48%;
}

.portfolio-category-card:nth-child(4) img {
  object-position: center center;
}


/* === v56 brand collaboration page refinement === */
.brand-collab-page main {
  background:
    radial-gradient(circle at top left, rgba(183,155,101,.08), transparent 22%),
    linear-gradient(180deg, #f7f1e7 0%, #f4eee3 100%);
}

.brand-page-hero {
  padding: 34px 6vw 18px;
}

.brand-page-hero-inner {
  max-width: 1320px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(20,20,20,.08);
  background:
    linear-gradient(135deg, rgba(14,14,13,.94), rgba(39,35,31,.94)),
    url('images/brand-v59/ap-01.jpg') center 34% / cover no-repeat;
  box-shadow: 0 30px 70px rgba(33,28,21,.14);
  border-radius: 18px;
  padding: 44px 42px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: 28px;
}

.brand-page-hero-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10,10,10,.86) 0%, rgba(16,16,16,.72) 48%, rgba(16,16,16,.48) 100%);
}

.brand-page-copy,
.brand-logo-wall {
  position: relative;
  z-index: 1;
}

.brand-page-kicker {
  margin: 0 0 14px;
  letter-spacing: .28em;
  font-size: 11px;
  color: #d5bc85;
  font-family: Cinzel, serif;
}

.brand-page-hero h1 {
  margin: 0 0 18px;
  font-size: clamp(34px, 5vw, 56px);
  letter-spacing: .18em;
  color: #fff7eb;
  font-weight: 500;
}

.brand-page-hero p {
  margin: 0;
  max-width: 640px;
  color: rgba(255,247,235,.78);
  line-height: 2;
  font-size: 16px;
}

.brand-logo-wall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-content: center;
}

.brand-logo {
  display: grid;
  place-items: center;
  min-height: 68px;
  padding: 12px 16px;
  border: 1px solid rgba(213,188,133,.24);
  background: rgba(255,250,241,.06);
  color: #f7edd6;
  text-align: center;
  letter-spacing: .14em;
  font-size: 15px;
}

.brand-logo-ap,
.brand-case-logo.brand-logo-ap {font-family: Georgia, 'Times New Roman', serif; letter-spacing: .05em;}
.brand-logo-lv,
.brand-case-logo.brand-logo-lv {font-family: Georgia, 'Times New Roman', serif; letter-spacing: .14em; font-size: 15px;}
.brand-logo-loro,
.brand-case-logo.brand-logo-loro {font-family: Georgia, 'Times New Roman', serif; font-style: italic; letter-spacing: .02em; text-transform: none;}
.brand-logo-martell,
.brand-case-logo.brand-logo-martell {font-family: Cinzel, serif; letter-spacing: .22em;}
.brand-logo-gucci,
.brand-case-logo.brand-logo-gucci {font-family: Georgia, 'Times New Roman', serif; letter-spacing: .18em;}
.brand-logo-valentino,
.brand-case-logo.brand-logo-valentino {font-family: Cinzel, serif; letter-spacing: .18em;}
.brand-logo-nike,
.brand-case-logo.brand-logo-nike {font-family: Arial, Helvetica, sans-serif; font-style: italic; font-weight: 700; letter-spacing: .06em;}
.brand-logo-generic,
.brand-case-logo.brand-logo-generic {font-family: Cinzel, serif; letter-spacing: .22em;}

.brand-cases-section {
  padding: 26px 6vw 110px;
}

.brand-cases-grid {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
}

.brand-case {
  grid-column: span 12;
  border: 1px solid rgba(20,20,20,.08);
  background: rgba(255,252,246,.86);
  box-shadow: 0 18px 46px rgba(30,24,18,.06);
  padding: 28px;
}

.brand-case--wide { grid-column: span 12; }
.brand-case--half { grid-column: span 6; }
.brand-case--hero { background: linear-gradient(180deg, rgba(255,252,246,.95), rgba(251,246,238,.88)); }
.brand-case--details { background: linear-gradient(180deg, rgba(249,244,235,.92), rgba(255,252,246,.94)); }

.brand-case-head {
  display: flex;
  justify-content: space-between;
  gap: 18px 32px;
  align-items: flex-start;
  margin-bottom: 24px;
}

.brand-case-head > div { max-width: 760px; }

.brand-case-index {
  display: inline-block;
  margin-bottom: 10px;
  color: #a88a52;
  font-size: 12px;
  letter-spacing: .28em;
  font-family: Cinzel, serif;
}

.brand-case-logo {
  margin: 0 0 14px;
  color: #181512;
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 500;
}

.brand-case-head p {
  margin: 0;
  line-height: 1.92;
  color: #5b5246;
}

.brand-case-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.brand-case-tags li {
  padding: 9px 13px;
  border: 1px solid rgba(183,155,101,.32);
  color: #785e2f;
  background: rgba(255,250,241,.78);
  font-size: 12px;
  letter-spacing: .12em;
}

.brand-case-gallery {
  display: grid;
  gap: 18px;
}

.brand-case-gallery--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.brand-case-gallery--single {
  grid-template-columns: 1fr;
}

.brand-shot {
  margin: 0;
  border: 1px solid rgba(20,20,20,.08);
  background: #fffaf1;
  overflow: hidden;
}

.brand-shot .portfolio-lightbox-link {
  display: block;
}

.brand-shot img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform .9s ease, filter .9s ease;
}

.brand-shot:hover img,
.brand-shot:focus-within img {
  transform: scale(1.03);
  filter: contrast(1.02);
}

.brand-shot figcaption {
  padding: 16px 18px 18px;
  background: linear-gradient(180deg, rgba(255,252,246,1), rgba(250,245,236,1));
}

.brand-shot figcaption strong {
  display: block;
  margin-bottom: 7px;
  font-size: 17px;
  color: #17130f;
  font-weight: 600;
  letter-spacing: .06em;
}

.brand-shot figcaption span {
  display: block;
  color: #665b4d;
  line-height: 1.8;
  font-size: 14px;
}

@media (max-width: 1024px) {
  .brand-page-hero-inner {
    grid-template-columns: 1fr;
    padding: 36px 28px;
  }

  .brand-cases-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brand-case,
  .brand-case--wide,
  .brand-case--half {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .brand-page-hero {
    padding: 22px 20px 12px;
  }

  .brand-page-hero-inner {
    border-radius: 14px;
    padding: 28px 20px;
  }

  .brand-logo-wall {
    grid-template-columns: 1fr 1fr;
  }

  .brand-cases-section {
    padding: 18px 20px 76px;
  }

  .brand-cases-grid,
  .brand-case-gallery--two {
    grid-template-columns: 1fr;
  }

  .brand-case {
    padding: 20px;
  }

  .brand-case-head {
    flex-direction: column;
    margin-bottom: 18px;
  }

  .brand-case-tags {
    justify-content: flex-start;
  }

  .brand-shot figcaption strong {
    font-size: 16px;
  }
}

@media (max-width: 520px) {
  .brand-logo-wall {
    grid-template-columns: 1fr;
  }

  .brand-page-hero p,
  .brand-case-head p,
  .brand-shot figcaption span {
    font-size: 14px;
  }
}

/* =========================================================
   v57 Brand Collaborations — black & gold album page
   ========================================================= */
.brand-collab-v57 {
  --brand57-bg: #090908;
  --brand57-panel: #11110f;
  --brand57-panel-2: #171510;
  --brand57-gold: #c7a65c;
  --brand57-gold-soft: #8f7543;
  --brand57-ivory: #f2e8d2;
  --brand57-muted: #a99c87;
  background: var(--brand57-bg);
}

.brand-collab-v57 .brand57-main,
.brand-collab-v57 main {
  background:
    radial-gradient(circle at 20% 5%, rgba(199,166,92,.08), transparent 26%),
    radial-gradient(circle at 86% 18%, rgba(199,166,92,.055), transparent 28%),
    linear-gradient(180deg, #0a0a09 0%, #080807 100%) !important;
  color: var(--brand57-ivory);
}

.brand-collab-v57 .brand57-tabs {
  position: relative !important;
  top: auto !important;
  background: #0d0d0c;
  border-top: 1px solid rgba(199,166,92,.16);
  border-bottom: 1px solid rgba(199,166,92,.22);
}

.brand-collab-v57 .brand57-tabs a {
  background: #161512;
  color: #c8bda8;
  border-color: rgba(199,166,92,.16);
}

.brand-collab-v57 .brand57-tabs a:hover,
.brand-collab-v57 .brand57-tabs a.current {
  color: #e2c77f;
  border-color: rgba(199,166,92,.5);
  background: #0a0a09;
}

.brand-collab-v57 .brand57-tabs .portfolio-commission-link {
  color: #e4cb88;
  border-color: rgba(199,166,92,.62);
}

.brand57-hero {
  padding: 76px 6vw 42px;
  text-align: center;
}

.brand57-hero-inner {
  max-width: 850px;
  margin: 0 auto;
}

.brand57-kicker {
  margin: 0 0 17px;
  color: var(--brand57-gold);
  font-family: Cinzel, serif;
  font-size: 11px;
  letter-spacing: .34em;
}

.brand57-hero h1 {
  margin: 0;
  color: #e5c77e;
  font-size: clamp(38px, 5vw, 60px);
  font-weight: 500;
  letter-spacing: .22em;
}

.brand57-hero h1::after {
  content: "";
  display: block;
  width: 86px;
  height: 1px;
  margin: 24px auto 22px;
  background: linear-gradient(90deg, transparent, var(--brand57-gold), transparent);
}

.brand57-lead {
  max-width: 720px;
  margin: 0 auto;
  color: #b4a894;
  line-height: 2.05;
  font-size: 15px;
  letter-spacing: .05em;
}

.brand57-logo-section {
  padding: 8px 4vw 56px;
}

.brand57-logo-grid {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 10px;
}

.brand57-logo-plaque {
  min-width: 0;
  height: 92px;
  padding: 14px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255,255,255,.018), transparent 40%),
    #11110f;
  border: 1px solid rgba(199,166,92,.38);
  box-shadow: inset 0 0 0 3px #0b0b0a, inset 0 0 0 4px rgba(199,166,92,.15);
  transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

.brand57-logo-plaque::before,
.brand57-logo-plaque::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: rgba(199,166,92,.58);
  pointer-events: none;
}
.brand57-logo-plaque::before { left: 5px; top: 5px; border-left: 1px solid; border-top: 1px solid; }
.brand57-logo-plaque::after { right: 5px; bottom: 5px; border-right: 1px solid; border-bottom: 1px solid; }

.brand57-logo-plaque:hover {
  transform: translateY(-3px);
  border-color: rgba(225,192,112,.72);
  background: #171510;
  box-shadow: inset 0 0 0 3px #0b0b0a, inset 0 0 0 4px rgba(199,166,92,.24), 0 12px 28px rgba(0,0,0,.22);
}

.brand57-logo-plaque img {
  width: auto;
  max-width: 82%;
  max-height: 48px;
  object-fit: contain;
  filter: invert(1) sepia(1) saturate(2.4) hue-rotate(348deg) brightness(.82) contrast(.92);
}

.brand57-logo-fallback {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: #d2b36a;
  font-family: Cinzel, "Times New Roman", serif;
  font-size: 18px;
  letter-spacing: .08em;
  text-align: center;
}
.brand57-logo-plaque img[src*="kindpng"],
.brand57-logo-plaque img[src*="logokit"] { max-height: 56px; }
.brand57-script { font-family: Georgia, "Times New Roman", serif; font-style: italic; letter-spacing: 0; }
.brand57-lv-fallback { font-size: 34px; letter-spacing: -.12em; }
.brand57-dior-fallback { font-family: Georgia, "Times New Roman", serif; font-size: 24px; letter-spacing: .02em; }
.brand57-shangri-fallback { font-size: 14px; line-height: 1.35; }

.brand57-case-section {
  padding: 68px 5vw 112px;
  border-top: 1px solid rgba(199,166,92,.13);
  background:
    linear-gradient(180deg, rgba(255,255,255,.01), transparent 18%),
    #090908;
}

.brand57-section-head {
  max-width: 820px;
  margin: 0 auto 42px;
  text-align: center;
}
.brand57-section-head > span {
  display: block;
  margin-bottom: 10px;
  color: var(--brand57-gold-soft);
  font-family: Cinzel, serif;
  font-size: 10px;
  letter-spacing: .28em;
}
.brand57-section-head h2 {
  margin: 0 0 14px;
  color: #e1c77f;
  font-size: 30px;
  letter-spacing: .22em;
  font-weight: 500;
}
.brand57-section-head p {
  margin: 0;
  color: #9f9481;
  line-height: 1.9;
  font-size: 14px;
}

.brand57-case-grid {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.brand57-card {
  scroll-margin-top: 36px;
  position: relative;
  padding: 24px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.018), transparent 34%),
    #11110f;
  border: 1px solid rgba(199,166,92,.26);
  box-shadow: 0 20px 45px rgba(0,0,0,.18);
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.brand57-card:hover,
.brand57-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(199,166,92,.5);
  box-shadow: 0 25px 52px rgba(0,0,0,.26);
}

.brand57-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 8px;
}
.brand57-card-head p {
  margin: 0 0 7px;
  color: #7d6738;
  font-family: Cinzel, serif;
  font-size: 10px;
  letter-spacing: .24em;
}
.brand57-card-head h3 {
  margin: 0;
  color: #d9bd73;
  font-family: Cinzel, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .08em;
}
.brand57-card-head > span {
  color: #756b5b;
  font-family: Cinzel, serif;
  font-size: 9px;
  letter-spacing: .14em;
  white-space: nowrap;
  padding-top: 3px;
}
.brand57-card-desc {
  margin: 0 0 20px;
  color: #a79a85;
  font-size: 13px;
  letter-spacing: .08em;
}

.brand57-card-thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.brand57-card-thumbs--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.brand57-card-thumbs--single { grid-template-columns: 1fr; }
.brand57-card-thumbs button {
  border: 0;
  padding: 0;
  background: #090908;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.brand57-card-thumbs button::after {
  content: "VIEW";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(6,6,5,.62);
  color: #d9bd73;
  font-family: Cinzel, serif;
  font-size: 10px;
  letter-spacing: .22em;
  opacity: 0;
  transition: opacity .25s ease;
}
.brand57-card-thumbs button:hover::after,
.brand57-card-thumbs button:focus-visible::after { opacity: 1; }
.brand57-card-thumbs img {
  display: block;
  width: 100%;
  height: 142px;
  object-fit: cover;
  opacity: .93;
  transition: transform .5s ease, opacity .4s ease;
}
.brand57-card-thumbs button:hover img { transform: scale(1.035); opacity: 1; }
.brand57-card-thumbs--single img { height: 210px; }

.brand57-view {
  margin-top: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #d3b46b;
  cursor: pointer;
  font-size: 13px;
  letter-spacing: .12em;
  text-align: left;
}
.brand57-view span {
  margin-left: 10px;
  color: #74684f;
  font-family: Cinzel, serif;
  font-size: 9px;
  letter-spacing: .14em;
}
.brand57-view::after {
  content: "→";
  margin-left: 12px;
  transition: margin-left .2s ease;
}
.brand57-view:hover::after { margin-left: 18px; }

/* Album modal */
.brand57-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.brand57-modal.is-open { display: flex; }
.brand57-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.88);
  backdrop-filter: blur(5px);
}
.brand57-modal-panel {
  position: relative;
  z-index: 1;
  width: min(1040px, 92vw);
  max-height: 92vh;
  overflow: auto;
  padding: 26px 30px 24px;
  background:
    radial-gradient(circle at top center, rgba(199,166,92,.06), transparent 28%),
    #10100e;
  border: 1px solid rgba(199,166,92,.46);
  box-shadow: 0 35px 90px rgba(0,0,0,.6), inset 0 0 0 5px #0b0b0a, inset 0 0 0 6px rgba(199,166,92,.12);
}
.brand57-modal-close {
  position: absolute;
  right: 18px;
  top: 14px;
  z-index: 4;
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  color: #c7a65c;
  font-size: 30px;
  font-weight: 200;
  cursor: pointer;
}
.brand57-modal-topline {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-end;
  padding: 0 48px 18px 0;
  border-bottom: 1px solid rgba(199,166,92,.16);
}
.brand57-modal-brand {
  display: block;
  margin-bottom: 6px;
  color: #d9bd73;
  font-family: Cinzel, "Times New Roman", serif;
  font-size: 20px;
  letter-spacing: .12em;
}
.brand57-modal-topline h2 {
  margin: 0;
  color: #a89b86;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .1em;
}
.brand57-modal-count {
  color: #b99a53;
  font-family: Cinzel, serif;
  font-size: 12px;
  letter-spacing: .18em;
  white-space: nowrap;
}
.brand57-viewer {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 14px;
  padding: 22px 0 16px;
}
.brand57-stage {
  margin: 0;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.brand57-stage img {
  display: block;
  max-width: min(780px, 72vw);
  width: auto;
  height: auto;
  max-height: 56vh;
  object-fit: contain;
  box-shadow: 0 18px 48px rgba(0,0,0,.38);
  border: 1px solid rgba(199,166,92,.14);
  background: #080807;
}
.brand57-stage figcaption {
  margin-top: 12px;
  color: #aa9d87;
  font-size: 13px;
  letter-spacing: .08em;
}
.brand57-arrow {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(199,166,92,.52);
  border-radius: 50%;
  background: rgba(10,10,9,.65);
  color: #c7a65c;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.brand57-arrow:hover:not(:disabled) { background: rgba(199,166,92,.12); border-color: #c7a65c; color: #e0c47c; }
.brand57-arrow:disabled { opacity: .2; cursor: default; }
.brand57-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 2px;
  justify-content: center;
  scrollbar-width: thin;
  scrollbar-color: #6f5d35 #0b0b0a;
}
.brand57-thumb {
  flex: 0 0 104px;
  height: 72px;
  border: 1px solid rgba(199,166,92,.16);
  padding: 3px;
  background: #090908;
  cursor: pointer;
  opacity: .64;
  transition: border-color .2s ease, opacity .2s ease, transform .2s ease;
}
.brand57-thumb:hover { opacity: .9; }
.brand57-thumb.is-current { border-color: #c7a65c; opacity: 1; transform: translateY(-2px); }
.brand57-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand57-modal-open { overflow: hidden; }

@media (max-width: 1240px) {
  .brand57-logo-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .brand57-hero { padding: 62px 24px 34px; }
  .brand57-logo-section { padding-left: 22px; padding-right: 22px; }
  .brand57-case-section { padding-left: 22px; padding-right: 22px; }
  .brand57-case-grid { grid-template-columns: 1fr; }
  .brand57-modal { padding: 18px; }
  .brand57-modal-panel { width: 96vw; padding: 22px 18px 18px; }
  .brand57-viewer { grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 8px; }
  .brand57-arrow { width: 38px; height: 38px; font-size: 28px; }
  .brand57-stage img { max-width: 74vw; max-height: 54vh; }
  .brand57-thumbs { justify-content: flex-start; }
}

@media (max-width: 620px) {
  .brand57-logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .brand57-logo-plaque { height: 78px; }
  .brand57-hero h1 { font-size: 34px; }
  .brand57-lead { font-size: 14px; }
  .brand57-card { padding: 17px; }
  .brand57-card-head h3 { font-size: 19px; }
  .brand57-card-thumbs img { height: 105px; }
  .brand57-card-thumbs--single img { height: 170px; }
  .brand57-modal { padding: 0; align-items: stretch; }
  .brand57-modal-panel { width: 100%; max-height: 100vh; min-height: 100vh; padding: 20px 12px 18px; border-left: 0; border-right: 0; }
  .brand57-modal-topline { padding-right: 42px; }
  .brand57-modal-brand { font-size: 16px; }
  .brand57-viewer { grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 5px; padding-top: 18px; }
  .brand57-arrow { width: 32px; height: 32px; font-size: 24px; }
  .brand57-stage { min-height: 300px; }
  .brand57-stage img { max-width: 77vw; max-height: 52vh; }
  .brand57-thumb { flex-basis: 84px; height: 60px; }
}


/* =========================================================
   v58 Brand Collaborations — light header + scrollable album
   ========================================================= */

/* Keep the page header / category navigation light like the other portfolio pages. */
.brand-collab-v57 .brand57-tabs {
  background: #f0ece4 !important;
  border-top: 1px solid rgba(80,65,45,.09) !important;
  border-bottom: 1px solid rgba(80,65,45,.13) !important;
}

.brand-collab-v57 .brand57-tabs a {
  background: rgba(255,255,255,.55) !important;
  color: #635b50 !important;
  border-color: rgba(70,58,42,.10) !important;
}

.brand-collab-v57 .brand57-tabs a:hover,
.brand-collab-v57 .brand57-tabs a.current {
  color: #8e6d32 !important;
  border-color: rgba(166,132,73,.38) !important;
  background: #fffaf2 !important;
}

.brand-collab-v57 .brand57-tabs .portfolio-commission-link {
  color: #dcc17f !important;
  border-color: #a78343 !important;
  background: #11100e !important;
}

.brand57-hero {
  padding: 72px 6vw 54px;
  text-align: center;
  color: #1a1712;
  background:
    radial-gradient(circle at 16% 28%, rgba(183,155,101,.10), transparent 26%),
    radial-gradient(circle at 86% 12%, rgba(183,155,101,.08), transparent 24%),
    linear-gradient(180deg, #fbf7ef 0%, #f4eee4 100%);
  border-bottom: 1px solid rgba(126,103,65,.15);
}

.brand57-kicker {
  color: #9a7a42;
}

.brand57-hero h1 {
  color: #2b251c;
}

.brand57-hero h1::after {
  background: linear-gradient(90deg, transparent, #b29256, transparent);
}

.brand57-lead {
  color: #655c50;
}

/* Let the black-and-gold mood begin from the logo wall downward. */
.brand57-logo-section {
  padding-top: 42px;
  background:
    radial-gradient(circle at 50% 0%, rgba(199,166,92,.075), transparent 31%),
    #090908;
}

/* Album scroll fix: the modal becomes the scroll container. */
.brand57-modal {
  align-items: flex-start;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 32px;
  background: rgba(0,0,0,.88);
}

.brand57-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.88);
  backdrop-filter: blur(5px);
}

.brand57-modal-panel {
  flex: 0 0 auto;
  margin: 0 auto;
  max-height: none;
  overflow: visible;
}

/* Keep the page behind the album fixed, but allow the album itself to scroll. */
body.brand57-modal-open {
  overflow: hidden !important;
}

@media (max-width: 900px) {
  .brand57-hero {
    padding: 58px 24px 42px;
  }

  .brand57-modal {
    padding: 18px 12px 30px;
  }

  .brand57-modal-panel {
    width: min(96vw, 1040px);
  }
}

@media (max-height: 720px) and (min-width: 621px) {
  .brand57-modal {
    padding-top: 18px;
    padding-bottom: 24px;
  }

  .brand57-stage img {
    max-height: 48vh;
  }
}


/* =========================================================
   v59 Brand Collaborations — clearer top header + misc album
   ========================================================= */

/* The very top site navigation now sits on a light paper panel so both the
   original dark logo and navigation copy stay readable. */
.brand-collab-v57 .site-header {
  background: rgba(255,250,242,.97);
  color: #1f1b16;
  border-bottom: 1px solid rgba(112,91,58,.13);
  box-shadow: 0 7px 24px rgba(45,36,24,.045);
  backdrop-filter: blur(10px);
}
.brand-collab-v57 .site-header .desktop-nav a { color: #302a23; }
.brand-collab-v57 .site-header .desktop-nav span { color: #756b5d; }
.brand-collab-v57 .site-header .desktop-nav a.active,
.brand-collab-v57 .site-header .desktop-nav a.active span { color: #9a783d; }
.brand-collab-v57 .site-header .lang,
.brand-collab-v57 .site-header .lang a { color: #463d33; }

/* A single, full-width final card gathers the extra commercial collaboration
   work without diluting the ten primary brand stories above. */
.brand59-misc-card {
  grid-column: 1 / -1;
  background:
    radial-gradient(circle at 76% 18%, rgba(199,166,92,.07), transparent 24%),
    linear-gradient(145deg, rgba(255,255,255,.022), transparent 34%),
    #11110f;
}
.brand59-misc-thumbs {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.brand59-misc-thumbs img {
  height: 150px;
}

@media (max-width: 900px) {
  .brand59-misc-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brand59-misc-thumbs button:nth-child(n+4) { display: none; }
}

@media (max-width: 620px) {
  .brand-collab-v57 .site-header {
    background: rgba(255,250,242,.98);
  }
  .brand59-misc-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand59-misc-thumbs button:nth-child(3) { display: none; }
  .brand59-misc-thumbs img { height: 118px; }
}


/* =========================================================
   v60 Brand Collaborations — album zoom + cleaner light header
   ========================================================= */
.brand-collab-v57 .site-header {
  border-bottom: 0 !important;
  box-shadow: 0 8px 26px rgba(45,36,24,.045);
}
.brand-collab-v57 .brand57-tabs {
  border-top: 0 !important;
}
.brand57-modal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0 0;
}
.brand57-zoom-hint {
  color: #8f816a;
  font-size: 12px;
  letter-spacing: .08em;
}
.brand57-zoom-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.brand57-zoom-btn {
  min-width: 40px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(199,166,92,.36);
  background: rgba(18,18,16,.86);
  color: #d5b977;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.brand57-zoom-btn:hover:not(:disabled) {
  border-color: #d1b06b;
  color: #eed291;
  background: rgba(28,27,23,.96);
}
.brand57-zoom-btn:disabled {
  opacity: .38;
  cursor: default;
}
.brand57-zoom-reset {
  min-width: 72px;
  font-size: 13px;
  letter-spacing: .08em;
}
.brand57-stage {
  min-height: 400px;
}
.brand57-zoom-frame {
  width: min(780px, 72vw);
  max-width: 100%;
  max-height: 58vh;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(199,166,92,.55) rgba(11,11,10,.8);
  background: #080807;
  border: 1px solid rgba(199,166,92,.14);
  box-shadow: 0 18px 48px rgba(0,0,0,.38);
}
.brand57-zoom-frame img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  margin: 0 auto;
  box-shadow: none;
  border: 0;
  background: transparent;
  transition: width .16s ease;
}
@media (max-width: 900px) {
  .brand57-modal-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
  .brand57-zoom-frame {
    width: 74vw;
    max-height: 54vh;
  }
}
@media (max-width: 620px) {
  .brand57-zoom-hint {
    font-size: 11px;
  }
  .brand57-zoom-actions {
    gap: 6px;
  }
  .brand57-zoom-btn {
    min-width: 36px;
    height: 34px;
    padding: 0 10px;
  }
  .brand57-zoom-reset {
    min-width: 66px;
  }
  .brand57-zoom-frame {
    width: 77vw;
    max-height: 52vh;
  }
}


/* =========================================================
   v61 Brand Collaborations — stable zoom/pan/pinch + header gap fix
   ========================================================= */
/* The black line was the 12px difference between the 92px site header and
   the old 104px main top padding, exposing the page's black background. */
.brand-collab-v57.no-category-title main,
.brand-collab-v57 .brand57-main {
  padding-top: 92px !important;
}
.brand-collab-v57 .site-header {
  height: 92px;
  border: 0 !important;
  box-shadow: 0 6px 22px rgba(45,36,24,.035) !important;
}
.brand-collab-v57 .brand57-tabs {
  border-top: 0 !important;
  margin-top: 0 !important;
}

/* Stable image viewport. Zoom uses transform only, never reflows image size. */
.brand57-stage {
  min-height: 420px;
}
.brand57-zoom-frame {
  position: relative;
  width: min(780px,72vw);
  height: min(58vh,620px);
  max-width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.025), transparent 55%),
    #080807;
  border: 1px solid rgba(199,166,92,.16);
  box-shadow: 0 18px 48px rgba(0,0,0,.38);
  cursor: zoom-in;
}
.brand57-zoom-frame.is-zoomed { cursor: grab; }
.brand57-zoom-frame.is-interacting { cursor: grabbing; }
.brand57-zoom-frame img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  transform: translate3d(0,0,0) scale(1);
  transform-origin: center center;
  will-change: transform;
  transition: none !important;
  pointer-events: none;
  box-shadow: none !important;
  border: 0 !important;
  background: transparent !important;
}
.brand57-work-meta {
  width: min(780px,72vw);
  max-width: 100%;
  margin-top: 14px;
  padding: 12px 4px 0;
  text-align: left;
  border-top: 1px solid rgba(199,166,92,.13);
}
.brand57-work-meta strong {
  display: block;
  color: #e1c67f;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .08em;
}
.brand57-work-meta span {
  display: block;
  margin-top: 5px;
  color: #8f836f;
  font-family: Cinzel, 'Noto Serif TC', serif;
  font-size: 11px;
  letter-spacing: .08em;
  line-height: 1.7;
}

@media (max-width:900px) {
  .brand-collab-v57.no-category-title main,
  .brand-collab-v57 .brand57-main {
    padding-top: 72px !important;
  }
  .brand-collab-v57 .site-header { height:72px; }
  .brand57-zoom-frame,
  .brand57-work-meta { width:74vw; }
  .brand57-zoom-frame { height:min(54vh,520px); }
}
@media (max-width:620px) {
  .brand57-stage { min-height:330px; }
  .brand57-zoom-frame,
  .brand57-work-meta { width:77vw; }
  .brand57-zoom-frame { height:min(52vh,430px); }
  .brand57-work-meta strong { font-size:13px; }
  .brand57-work-meta span { font-size:10px; }
}


/* =========================================================
   v62 Brand gallery — data driven maintenance
   ========================================================= */
.brand-gallery-empty {
  cursor: default;
  opacity: .55;
}

/* === v108: Hardpen portfolio white header === */
.hardpen-albums-page .site-header{
  background:#ffffff !important;
  color:#17130f !important;
  border-bottom:1px solid rgba(20,20,20,.08);
  box-shadow:0 4px 18px rgba(20,20,20,.035);
}
.hardpen-albums-page .site-header .desktop-nav a{
  color:#2b2722 !important;
}
.hardpen-albums-page .site-header .desktop-nav span{
  color:#6f675d !important;
}
.hardpen-albums-page .site-header .desktop-nav a.active,
.hardpen-albums-page .site-header .desktop-nav a.active span{
  color:#9a783d !important;
}
.hardpen-albums-page .site-header .lang,
.hardpen-albums-page .site-header .lang a,
.hardpen-albums-page .site-header .menu-btn{
  color:#17130f !important;
}
@media(max-width:900px){
  .hardpen-albums-page .site-header{
    background:#ffffff !important;
  }
}


/* =========================================================
   v109 Brush portfolio — black & gold category albums
   ========================================================= */
.brush-albums-page{
  --brush-gold:#c7a65c;
  --brush-gold-bright:#e4c77c;
  background:#090908;
  color:#e9dfca;
}
.brush-albums-page main{background:#090908;}
.brush-albums-page .site-header{
  background:#fff !important;
  color:#17130f !important;
  border-bottom:1px solid rgba(20,20,20,.08);
  box-shadow:0 4px 18px rgba(20,20,20,.035);
}
.brush-albums-page .site-header .desktop-nav a{color:#2b2722 !important;}
.brush-albums-page .site-header .desktop-nav span{color:#6f675d !important;}
.brush-albums-page .site-header .desktop-nav a.active,
.brush-albums-page .site-header .desktop-nav a.active span{color:#9a783d !important;}
.brush-albums-page .site-header .lang,
.brush-albums-page .site-header .lang a,
.brush-albums-page .site-header .menu-btn{color:#17130f !important;}
.brush-albums-page .portfolio-tabs{
  position:relative!important;
  top:auto!important;
  background:#0d0d0c;
  border-top:1px solid rgba(199,166,92,.16);
  border-bottom:1px solid rgba(199,166,92,.22);
}
.brush-albums-page .portfolio-tabs a{
  background:#161512!important;
  color:#c8bda8!important;
  border-color:rgba(199,166,92,.16)!important;
}
.brush-albums-page .portfolio-tabs a:hover,
.brush-albums-page .portfolio-tabs a.current{
  color:#e2c77f!important;
  border-color:rgba(199,166,92,.5)!important;
  background:#0a0a09!important;
}
.brush-albums-page .portfolio-tabs .portfolio-commission-link{
  color:#e4cb88!important;
  border-color:rgba(199,166,92,.62)!important;
}
.brush-album-section{
  padding:68px 5vw 110px;
  background:radial-gradient(circle at 50% 0%,rgba(199,166,92,.075),transparent 34%),#090908;
}
.brush-section-intro{max-width:760px;margin:0 auto 44px;text-align:center;}
.brush-section-intro>p{margin:0 0 15px;color:#9c8147;font-family:Cinzel,"Times New Roman",serif;font-size:10px;letter-spacing:.3em;}
.brush-section-intro h1{margin:0;color:#e3c57a;font-size:clamp(34px,4.6vw,54px);font-weight:500;letter-spacing:.22em;}
.brush-section-intro h1::after{content:"";display:block;width:78px;height:1px;margin:21px auto 18px;background:linear-gradient(90deg,transparent,#c7a65c,transparent);}
.brush-section-intro>span{display:block;color:#a99b83;font-size:13px;line-height:1.9;letter-spacing:.06em;}
.brush-album-grid{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;}
.brush-album-card{margin:0;}
.brush-album-card--wide{grid-column:1/-1;}
.brush-album-card--wide .brush-cover{aspect-ratio:16/7;}
.brush-album-card--wide .brush-cover img{object-position:center 48%;}
.brush-album-card--wide .brush-cover-copy strong{font-size:34px;}
.brush-cover{position:relative;display:block;width:100%;aspect-ratio:1/1;padding:0;overflow:hidden;border:1px solid rgba(199,166,92,.3);background:#11110f;cursor:pointer;box-shadow:0 18px 42px rgba(0,0,0,.22);transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;}
.brush-cover:hover,.brush-cover:focus-visible{transform:translateY(-4px);border-color:rgba(229,199,126,.72);box-shadow:0 24px 52px rgba(0,0,0,.34);outline:none;}
.brush-cover img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.88) contrast(1.03);transform:scale(1.01);transition:transform .65s ease,filter .45s ease;}
.brush-cover:hover img,.brush-cover:focus-visible img{transform:scale(1.055);filter:saturate(.95) contrast(1.05);}
.brush-cover[data-open-brush="couplet"] img{object-position:center 22%;}
.brush-cover-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.06) 35%,rgba(0,0,0,.82) 100%);}
.brush-cover-index{position:absolute;top:18px;left:20px;color:rgba(231,205,144,.82);font-family:Cinzel,"Times New Roman",serif;font-size:10px;letter-spacing:.22em;}
.brush-cover-copy{position:absolute;left:24px;right:24px;bottom:24px;text-align:left;color:#fff;}
.brush-cover-copy small{display:block;margin-bottom:7px;color:#c2a35f;font-family:Cinzel,"Times New Roman",serif;font-size:9px;letter-spacing:.2em;}
.brush-cover-copy strong{display:block;color:#f0dfb3;font-size:30px;font-weight:500;letter-spacing:.16em;}
.brush-cover-copy em{display:block;margin-top:12px;color:#cdb36e;font-family:Cinzel,"Times New Roman",serif;font-size:9px;font-style:normal;letter-spacing:.17em;opacity:.85;}
.brush-album-card>p{margin:14px 4px 0;color:#8f8574;font-size:12px;line-height:1.85;letter-spacing:.05em;}

.brush-course-cta{
  max-width:1080px;
  margin:64px auto 0;
  padding:38px 20px 0;
  text-align:center;
  border-top:1px solid rgba(199,166,92,.22);
}
.brush-course-cta .cta-kicker{
  margin:0 0 13px;
  color:#9c8147;
  font-family:Cinzel,"Times New Roman",serif;
  font-size:9px;
  letter-spacing:.28em;
}
.brush-course-cta h3{
  margin:0;
  color:#e3c57a;
  font-size:clamp(22px,2.8vw,31px);
  font-weight:500;
  letter-spacing:.11em;
  line-height:1.65;
}
.brush-course-cta>p:not(.cta-kicker){
  max-width:680px;
  margin:14px auto 24px;
  color:#918672;
  font-size:12px;
  line-height:1.9;
  letter-spacing:.05em;
}
.brush-course-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;}
.brush-course-cta a{
  display:inline-flex;
  min-width:210px;
  min-height:48px;
  padding:0 26px;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(199,166,92,.55);
  color:#e2c77d;
  background:#11110f;
  font-size:12px;
  letter-spacing:.12em;
  text-decoration:none;
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;
}
.brush-course-cta a:hover,.brush-course-cta a:focus-visible{
  background:#c7a65c;
  color:#0b0b09;
  border-color:#d9bd73;
  transform:translateY(-2px);
  outline:none;
}
@media(max-width:620px){
  .brush-course-cta{margin-top:46px;padding:30px 8px 0;}
  .brush-course-cta h3{font-size:21px;}
  .brush-course-actions{flex-direction:column;gap:10px;}
  .brush-course-cta a{width:100%;min-width:0;}
}

body.brush-modal-open{overflow:hidden;}
.brush-modal{position:fixed;z-index:1400;inset:0;display:none;align-items:flex-start;justify-content:center;overflow:hidden;padding:30px 18px;}
.brush-modal.is-open{display:flex;}
.brush-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.9);}
.brush-modal-panel{position:relative;z-index:1;width:min(1180px,96vw);max-height:calc(100vh - 60px);overflow-y:auto;overscroll-behavior:contain;padding:28px;color:#e9dfca;background:#11110f;border:1px solid rgba(199,166,92,.32);box-shadow:0 30px 80px rgba(0,0,0,.6);}
.brush-modal-close{position:absolute;z-index:2;top:10px;right:16px;border:0;color:#d9bd73;background:transparent;font-size:34px;line-height:1;cursor:pointer;}
.brush-modal-topline{display:flex;justify-content:space-between;align-items:flex-start;gap:22px;padding-right:42px;margin-bottom:16px;}
.brush-modal-brand{color:#8f7439;font-family:Cinzel,"Times New Roman",serif;font-size:10px;letter-spacing:.24em;}
.brush-modal-topline h2{margin:7px 0 0;color:#e1c67e;font-size:24px;font-weight:500;letter-spacing:.12em;}
.brush-modal-count{color:#7b705d;font-family:Cinzel,"Times New Roman",serif;font-size:10px;letter-spacing:.14em;padding-top:4px;}
.brush-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px;padding:10px 0;border-top:1px solid rgba(199,166,92,.12);border-bottom:1px solid rgba(199,166,92,.12);color:#756c5f;font-size:10px;letter-spacing:.08em;}
.brush-zoom-actions{display:flex;gap:6px;}
.brush-zoom-btn{min-width:36px;height:32px;padding:0 9px;border:1px solid rgba(199,166,92,.25);color:#cdb36e;background:#0b0b0a;cursor:pointer;}
.brush-zoom-btn:disabled{opacity:.35;cursor:default;}.brush-zoom-reset{min-width:68px;}
.brush-viewer{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:10px;}
.brush-arrow{height:72px;border:1px solid rgba(199,166,92,.2);color:#d1b56f;background:#0b0b0a;font-size:30px;cursor:pointer;}.brush-arrow:disabled{opacity:.25;cursor:default;}
.brush-stage{margin:0;min-width:0;}
.brush-zoom-frame{height:min(68vh,680px);overflow:hidden;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at center,rgba(255,255,255,.025),transparent 58%),#080807;border:1px solid rgba(199,166,92,.14);cursor:zoom-in;touch-action:none;user-select:none;}
.brush-zoom-frame.is-zoomed{cursor:grab;}.brush-zoom-frame.is-interacting{cursor:grabbing;}
.brush-zoom-frame img{display:block;width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important;transform:translate3d(0,0,0) scale(1);transform-origin:center center;will-change:transform;pointer-events:none;}
.brush-work-meta{margin-top:13px;padding-top:11px;border-top:1px solid rgba(199,166,92,.12);text-align:left;}
.brush-work-meta strong{display:block;color:#ddc17a;font-size:14px;font-weight:500;letter-spacing:.08em;}.brush-work-meta span{display:block;margin-top:5px;color:#827765;font-size:10px;letter-spacing:.08em;}
.brush-thumbs{display:flex;gap:8px;margin-top:18px;padding-top:14px;overflow-x:auto;border-top:1px solid rgba(199,166,92,.12);}
.brush-thumb{flex:0 0 76px;width:76px;height:76px;padding:0;overflow:hidden;border:1px solid rgba(199,166,92,.18);background:#080807;cursor:pointer;opacity:.62;}.brush-thumb.is-current{border-color:#c7a65c;opacity:1;}.brush-thumb img{display:block;width:100%;height:100%;object-fit:cover;}
@media(max-width:900px){
  .brush-albums-page .site-header{background:#fff!important;}
  .brush-album-section{padding:54px 22px 80px;}
  .brush-album-grid{gap:18px;}
  .brush-modal{padding:14px 6px;}.brush-modal-panel{padding:20px 12px;}.brush-toolbar{align-items:flex-start;}.brush-toolbar>span{max-width:160px;line-height:1.6;}.brush-viewer{grid-template-columns:34px minmax(0,1fr) 34px;gap:4px;}.brush-arrow{height:58px;font-size:26px;}.brush-zoom-frame{height:58vh;}
}
@media(max-width:620px){
  .brush-album-grid{grid-template-columns:1fr;}.brush-album-card--wide{grid-column:auto;}.brush-album-card--wide .brush-cover{aspect-ratio:1/1;}.brush-album-card--wide .brush-cover-copy strong{font-size:27px;}.brush-cover-copy strong{font-size:27px;}.brush-section-intro{margin-bottom:30px;}.brush-section-intro>span{font-size:12px;}.brush-thumb{flex-basis:64px;width:64px;height:64px;}
}


/* v116: services routing, seminar/game detail pages, brand inquiry CTA */
.brand-business-cta {
  max-width: 920px;
  margin: 72px auto 92px;
  padding: 34px 24px 0;
  text-align: center;
  border-top: 1px solid rgba(183,155,101,.42);
}
.brand-business-cta .cta-kicker { margin:0 0 10px; color:#b79b65; font-size:11px; letter-spacing:.28em; }
.brand-business-cta h2 { margin:0; color:#f2eadc; font-family:"Noto Serif TC","Songti TC",serif; font-size:clamp(24px,3vw,36px); font-weight:500; letter-spacing:.08em; }
.brand-business-cta > p:not(.cta-kicker) { max-width:680px; margin:14px auto 24px; color:rgba(242,234,220,.66); line-height:1.9; font-size:14px; }
.brand-business-cta a { display:inline-flex; align-items:center; justify-content:center; min-width:190px; min-height:48px; padding:0 24px; border:1px solid rgba(183,155,101,.72); color:#ead9b5; text-decoration:none; letter-spacing:.12em; transition:.25s ease; }
.brand-business-cta a:hover { background:#b79b65; color:#111; transform:translateY(-2px); }

.service-detail-page { background:#f7f0e6; color:#211b16; }
.service-detail-page main { overflow:hidden; }
.service-detail-hero { position:relative; min-height:clamp(520px,68vh,760px); display:flex; align-items:flex-end; background:#17120f; overflow:hidden; }
.service-detail-hero > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.seminar-detail-hero > img { object-position:center 30%; }
.game-detail-hero > img { object-position:center 42%; }
.service-detail-hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,8,7,.82) 0%,rgba(10,8,7,.48) 45%,rgba(10,8,7,.10) 78%),linear-gradient(0deg,rgba(10,8,7,.68),transparent 55%); }
.service-detail-hero-copy { position:relative; z-index:2; width:min(1180px,calc(100% - 48px)); margin:0 auto; padding:0 0 76px; color:#fff; }
.service-detail-hero-copy p { margin:0 0 12px; color:#d2b474; font-size:12px; letter-spacing:.32em; }
.service-detail-hero-copy h1 { margin:0; font-family:"Noto Serif TC","Songti TC",serif; font-weight:500; font-size:clamp(42px,6vw,76px); letter-spacing:.12em; }
.service-detail-hero-copy span { display:block; max-width:640px; margin-top:15px; color:rgba(255,255,255,.80); font-size:clamp(15px,1.6vw,19px); line-height:1.8; letter-spacing:.05em; }
.service-detail-intro { width:min(900px,calc(100% - 48px)); margin:0 auto; padding:86px 0 74px; text-align:center; }
.service-detail-eyebrow { color:#a57b32; font-size:11px; letter-spacing:.28em; }
.service-detail-intro h2 { margin:16px auto 22px; max-width:760px; font-family:"Noto Serif TC","Songti TC",serif; font-weight:500; font-size:clamp(25px,3.4vw,40px); line-height:1.55; letter-spacing:.04em; }
.service-detail-intro > p { max-width:780px; margin:0 auto; color:#665b50; font-size:15px; line-height:2.05; }
.service-detail-tags { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin-top:30px; }
.service-detail-tags span { padding:8px 13px; border:1px solid rgba(165,123,50,.30); color:#765c31; background:rgba(255,255,255,.48); font-size:12px; letter-spacing:.08em; }
.service-detail-gallery-section { padding:76px 0 92px; background:#171411; }
.service-detail-section-head { width:min(1180px,calc(100% - 48px)); margin:0 auto 34px; color:#efe6d6; }
.service-detail-section-head p { margin:0 0 8px; color:#b79b65; font-size:11px; letter-spacing:.28em; }
.service-detail-section-head h2 { margin:0; font-family:"Noto Serif TC","Songti TC",serif; font-size:clamp(28px,4vw,44px); font-weight:500; letter-spacing:.08em; }
.service-detail-section-head span { display:block; margin-top:12px; color:rgba(239,230,214,.56); font-size:13px; }
.service-detail-gallery { width:min(1180px,calc(100% - 48px)); margin:0 auto; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:250px; gap:12px; }
.service-gallery-item { position:relative; padding:0; border:0; overflow:hidden; cursor:zoom-in; background:#2a2420; }
.service-gallery-item:nth-child(1), .service-gallery-item:nth-child(6), .service-gallery-item:nth-child(10) { grid-column:span 2; }
.service-gallery-item:nth-child(2), .service-gallery-item:nth-child(8) { grid-row:span 2; }
.service-gallery-item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .65s cubic-bezier(.22,1,.36,1),filter .4s ease; filter:saturate(.9) contrast(1.03); }
.service-gallery-item:nth-child(1) img { object-position:center 30%; }
.service-gallery-item:hover img { transform:scale(1.045); filter:saturate(1) contrast(1.07); }
.service-detail-cta { padding:78px 24px 88px; text-align:center; background:#f7f0e6; }
.service-detail-cta p { margin:0 0 10px; color:#a57b32; font-size:11px; letter-spacing:.28em; }
.service-detail-cta h2 { margin:0 auto; max-width:780px; font-family:"Noto Serif TC","Songti TC",serif; font-size:clamp(25px,3.6vw,42px); font-weight:500; line-height:1.55; }
.service-detail-cta span { display:block; max-width:650px; margin:14px auto 24px; color:#6d6257; line-height:1.85; font-size:14px; }
.service-detail-cta a { display:inline-flex; min-width:180px; min-height:50px; padding:0 24px; align-items:center; justify-content:center; background:#181411; color:#ead9b5; border:1px solid #181411; text-decoration:none; letter-spacing:.12em; transition:.25s ease; }
.service-detail-cta a:hover { background:#b79b65; border-color:#b79b65; color:#111; transform:translateY(-2px); }

.service-gallery-modal { position:fixed; inset:0; z-index:9999; display:none; }
.service-gallery-modal[aria-hidden="false"] { display:block; }
.service-gallery-backdrop { position:absolute; inset:0; background:rgba(6,5,4,.94); }
.service-gallery-panel { position:absolute; inset:0; display:grid; grid-template-columns:70px 1fr 70px; grid-template-rows:54px 1fr 42px; align-items:center; }
.service-gallery-close { position:absolute; right:22px; top:14px; z-index:3; width:42px; height:42px; border:1px solid rgba(255,255,255,.24); border-radius:50%; background:rgba(0,0,0,.25); color:#fff; font-size:26px; cursor:pointer; }
.service-gallery-counter { grid-column:2; grid-row:1; justify-self:center; color:rgba(255,255,255,.68); font-size:12px; letter-spacing:.16em; }
.service-gallery-stage { grid-column:2; grid-row:2; position:relative; width:100%; height:100%; overflow:hidden; display:flex; align-items:center; justify-content:center; touch-action:none; cursor:grab; }
.service-gallery-stage:active { cursor:grabbing; }
.service-gallery-stage img { max-width:100%; max-height:100%; object-fit:contain; transform-origin:center; user-select:none; will-change:transform; }
.service-gallery-arrow { grid-row:2; align-self:center; width:50px; height:70px; border:0; background:transparent; color:rgba(255,255,255,.78); font-size:58px; cursor:pointer; }
.service-gallery-arrow.prev { grid-column:1; justify-self:end; }.service-gallery-arrow.next { grid-column:3; justify-self:start; }
.service-gallery-hint { grid-column:2; grid-row:3; justify-self:center; color:rgba(255,255,255,.45); font-size:11px; letter-spacing:.08em; }
body.gallery-open { overflow:hidden; }

.game-preview-section { background:#171411; }
.game-preview-card { width:min(1040px,calc(100% - 48px)); margin:0 auto; display:grid; grid-template-columns:1.1fr .9fr; background:#211c18; border:1px solid rgba(183,155,101,.24); color:#eee4d2; }
.game-preview-card img { width:100%; height:440px; object-fit:cover; object-position:center 42%; display:block; }
.game-preview-card div { padding:46px; display:flex; flex-direction:column; justify-content:center; }
.game-preview-card h3 { margin:0 0 15px; font-family:"Noto Serif TC","Songti TC",serif; font-size:28px; font-weight:500; line-height:1.5; }
.game-preview-card p { margin:0; color:rgba(238,228,210,.62); line-height:1.95; font-size:14px; }

@media (max-width:900px){
  .service-detail-gallery{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:210px;}
  .service-gallery-item:nth-child(1),.service-gallery-item:nth-child(6),.service-gallery-item:nth-child(10){grid-column:span 1;}
  .game-preview-card{grid-template-columns:1fr;}.game-preview-card img{height:360px;}.game-preview-card div{padding:30px;}
}
@media (max-width:640px){
  .service-detail-hero{min-height:520px}.service-detail-hero-copy{width:calc(100% - 34px);padding-bottom:52px;}.service-detail-hero-shade{background:linear-gradient(0deg,rgba(10,8,7,.82),rgba(10,8,7,.15) 75%);}
  .service-detail-intro{width:calc(100% - 34px);padding:62px 0 56px}.service-detail-gallery-section{padding:58px 0 68px}.service-detail-section-head,.service-detail-gallery{width:calc(100% - 28px)}
  .service-detail-gallery{grid-auto-rows:180px;gap:8px}.service-gallery-item:nth-child(2),.service-gallery-item:nth-child(8){grid-row:span 1;}
  .service-gallery-panel{grid-template-columns:38px 1fr 38px}.service-gallery-arrow{width:38px;font-size:42px}.service-gallery-close{right:10px;top:10px}
  .brand-business-cta{margin:52px 16px 70px}.game-preview-card{width:calc(100% - 28px)}.game-preview-card img{height:280px}.game-preview-card div{padding:24px}.game-preview-card h3{font-size:23px}
}


/* v119: seminar/game album viewer + hero crop + service-card full-height image */
.services-page .service-card-image{position:relative;align-self:stretch;min-height:100%;overflow:hidden;}
.services-page .service-card-image img{position:absolute;inset:0;width:100%;height:100%;min-height:100%;object-fit:cover;}
.services-page .service-card-seminar .service-card-image img{object-position:center 42%;}
.seminar-detail-hero > img{object-position:center 48%;}
.game-detail-hero > img{object-position:center 34%;}
.service-album-section{padding-bottom:96px;}
.service-album-wrap{width:min(1040px,calc(100% - 48px));margin:0 auto;}
.service-album-card .brush-cover{aspect-ratio:16/7;}
.service-album-card .brush-cover img{object-position:center 48%;}
.seminar-detail-page .service-album-card .brush-cover img{object-position:center 45%;}
.game-detail-page .service-album-card .brush-cover img{object-position:center 32%;}
.service-album-card>p{color:rgba(239,230,214,.58);text-align:center;margin-top:16px;}
.service-experience{max-width:760px;margin:26px auto 0;padding:16px 20px;border-top:1px solid rgba(165,123,50,.25);border-bottom:1px solid rgba(165,123,50,.25);display:flex;justify-content:center;gap:16px;flex-wrap:wrap;color:#665b50;font-size:13px;line-height:1.8;}
.service-experience strong{color:#9b7330;letter-spacing:.14em;font-weight:600;}
.service-experience span{letter-spacing:.04em;}
@media(max-width:640px){
  .service-album-wrap{width:calc(100% - 28px);}
  .service-album-card .brush-cover{aspect-ratio:4/3;}
  .game-detail-page .service-album-card .brush-cover img{object-position:center 30%;}
  .services-page .service-card-image{min-height:300px;}
  .services-page .service-card-image img{position:absolute!important;min-height:0!important;}
  .service-experience{gap:8px;padding:14px 10px;}
}


/* v120: keep the service photo walls visually full while album modal handles detailed viewing. */
.service-detail-gallery { grid-auto-flow: dense; }


/* v121: brand album scroll/swipe usability + expanded seminar experience */
.brand57-modal{
  overflow:hidden !important;
}
.brand57-modal-panel{
  max-height:calc(100vh - 64px) !important;
  overflow-y:auto !important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(199,166,92,.55) rgba(11,11,10,.8);
}
.brand57-zoom-frame{
  touch-action:pan-y;
}
.brand57-zoom-frame.is-zoomed{
  touch-action:none;
}
.brand57-zoom-hint::after{
  content:"・100% 時可上下捲動／左右滑動換圖";
}
.seminar-experience{
  max-width:860px;
  align-items:flex-start;
}
.seminar-experience strong{
  flex:0 0 auto;
}
.seminar-experience span{
  flex:1 1 620px;
  text-align:left;
}
@media(max-width:900px){
  .brand57-modal-panel{
    max-height:calc(100vh - 36px) !important;
  }
}
@media(max-width:620px){
  .brand57-modal{
    padding:8px 6px 12px !important;
    align-items:flex-start !important;
  }
  .brand57-modal-panel{
    min-height:0 !important;
    max-height:calc(100vh - 20px) !important;
    width:100% !important;
  }
  .seminar-experience{
    align-items:center;
  }
  .seminar-experience span{
    flex-basis:100%;
    text-align:center;
  }
}


/* v123 — 課程專區作品按鈕等寬 */
.courses-page .courses-cta-actions .btn {
  width: 226px;
  min-width: 226px;
}
@media (max-width: 600px) {
  .courses-page .courses-cta-actions .btn {
    width: min(226px, 78vw);
    min-width: min(226px, 78vw);
  }
}


/* v125 — 首頁服務項目桌機版維持單排八項 */
.services .service-grid {
  max-width: 1380px;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 20px 16px;
}
.services .service-grid > a.service-grid-link {
  min-width: 0;
}
@media (max-width: 900px) {
  .services .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

/* v138: mobile homepage/course/services fixes */
@media (max-width: 900px) {
  /* Homepage: keep all six featured works visible on mobile. */
  .works .work-card:nth-child(n+4) {
    display: block;
  }
}

@media (max-width: 760px) {
  /* Services: remove the decorative ink block that overlaps the mobile hero. */
  .services-page .services-hero-ink {
    display: none !important;
  }
}


/* =========================================================
   v140 Mobile gallery + header + product navigation fixes
   ========================================================= */

/* Keep the four portfolio detail headers readable over every hero/background. */
.custom-story-page .site-header,
.spring-albums-page .site-header,
.hardpen-albums-page .site-header,
.brush-albums-page .site-header {
  background:#fff !important;
  color:#17130f !important;
  border-bottom:1px solid rgba(20,20,20,.08);
  box-shadow:0 4px 18px rgba(20,20,20,.035);
}
.custom-story-page .site-header .desktop-nav a,
.spring-albums-page .site-header .desktop-nav a,
.hardpen-albums-page .site-header .desktop-nav a,
.brush-albums-page .site-header .desktop-nav a { color:#2b2722 !important; }
.custom-story-page .site-header .desktop-nav span,
.spring-albums-page .site-header .desktop-nav span,
.hardpen-albums-page .site-header .desktop-nav span,
.brush-albums-page .site-header .desktop-nav span { color:#6f675d !important; }
.custom-story-page .site-header .desktop-nav a.active,
.custom-story-page .site-header .desktop-nav a.active span,
.spring-albums-page .site-header .desktop-nav a.active,
.spring-albums-page .site-header .desktop-nav a.active span,
.hardpen-albums-page .site-header .desktop-nav a.active,
.hardpen-albums-page .site-header .desktop-nav a.active span,
.brush-albums-page .site-header .desktop-nav a.active,
.brush-albums-page .site-header .desktop-nav a.active span { color:#9a783d !important; }
.custom-story-page .site-header .lang,
.custom-story-page .site-header .lang a,
.custom-story-page .site-header .menu-btn,
.spring-albums-page .site-header .lang,
.spring-albums-page .site-header .lang a,
.spring-albums-page .site-header .menu-btn,
.hardpen-albums-page .site-header .lang,
.hardpen-albums-page .site-header .lang a,
.hardpen-albums-page .site-header .menu-btn,
.brush-albums-page .site-header .lang,
.brush-albums-page .site-header .lang a,
.brush-albums-page .site-header .menu-btn { color:#17130f !important; }

/* Product pages: menu injected by product-detail.js, same behavior as homepage menu. */
.product-page .product-mobile-menu { z-index:2200; }

@media (max-width:720px) {
  /* Unified portfolio lightbox: allow the whole viewer to move vertically so
     longer captions remain reachable. At fit size one-finger swipe scrolls;
     after zooming, touch becomes image pan again. */
  .portfolio-lightbox {
    display:block !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  .portfolio-lightbox-toolbar {
    position:sticky !important;
    top:0;
    z-index:4;
  }
  .portfolio-lightbox-stage {
    flex:none !important;
    height:72dvh !important;
    min-height:360px !important;
    touch-action:pan-y !important;
  }
  .portfolio-lightbox-stage.is-zoomed {
    touch-action:none !important;
  }
  .portfolio-lightbox-caption {
    min-height:auto !important;
    padding:16px 20px 32px !important;
  }

  /* Custom story album: its old panel clipped anything below the image. */
  .custom-album-modal.is-open {
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  .custom-album-panel {
    max-height:none !important;
    overflow:visible !important;
    margin:8px auto 30px !important;
  }
  .custom-album-zoom-frame {
    height:52dvh !important;
    touch-action:pan-y !important;
  }
  .custom-album-zoom-frame.is-zoomed { touch-action:none !important; }

  /* Spring / hard-pen / brush album viewers use the same mobile rule:
     normal swipe scrolls the dialog; zoomed image can still be dragged. */
  .spring-modal,
  .hardpen-modal,
  .brush-modal {
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    align-items:flex-start !important;
  }
  .spring-modal-panel,
  .hardpen-modal-panel,
  .brush-modal-panel {
    max-height:none !important;
    overflow:visible !important;
  }
  .spring-zoom-frame,
  .hardpen-zoom-frame,
  .brush-zoom-frame {
    height:56dvh !important;
    touch-action:pan-y !important;
  }
  .spring-zoom-frame.is-zoomed,
  .hardpen-zoom-frame.is-zoomed,
  .brush-zoom-frame.is-zoomed { touch-action:none !important; }
}

/* =========================================================
   v141 Mobile finishing fixes
   - portfolio menus readable on light dropdown
   - album dialogs use an explicit mobile scroll container
   - homepage hero removes the extra lower-right blank area
   ========================================================= */

@media (max-width: 760px) {
  /* Portfolio mobile menu: the dropdown is light, so never inherit the
     dark-page text color. */
  .custom-story-page .mobile-nav,
  .spring-albums-page .mobile-nav,
  .hardpen-albums-page .mobile-nav,
  .brush-albums-page .mobile-nav {
    background:#fffaf1 !important;
    color:#211c17 !important;
    border-color:rgba(50,40,28,.14) !important;
  }
  .custom-story-page .mobile-nav a,
  .spring-albums-page .mobile-nav a,
  .hardpen-albums-page .mobile-nav a,
  .brush-albums-page .mobile-nav a {
    color:#211c17 !important;
    font-weight:600;
    text-shadow:none !important;
  }
  .custom-story-page .mobile-nav a.active,
  .spring-albums-page .mobile-nav a.active,
  .hardpen-albums-page .mobile-nav a.active,
  .brush-albums-page .mobile-nav a.active {
    color:#9a783d !important;
  }

  /* Homepage: trim the unused lower part on small screens. */
  .home-page .hero,
  body:not(.portfolio-page):not(.services-page):not(.courses-page) .hero {
    min-height:570px !important;
    padding-bottom:6px !important;
  }
  .home-page .hero .ink-left,
  body:not(.portfolio-page):not(.services-page):not(.courses-page) .hero .ink-left {
    bottom:-1vh !important;
    height:38vh !important;
  }

  /* Unified portfolio lightbox. Make the lightbox itself the scroll owner,
     and keep the image stage short enough that captions are reachable. */
  .portfolio-lightbox.is-open {
    display:block !important;
    height:100dvh !important;
    overflow-y:scroll !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior-y:contain !important;
    touch-action:pan-y !important;
  }
  .portfolio-lightbox-stage {
    height:50dvh !important;
    min-height:300px !important;
    touch-action:pan-y !important;
  }
  .portfolio-lightbox-stage.is-zoomed {
    touch-action:none !important;
  }
  .portfolio-lightbox-caption {
    padding-bottom:42px !important;
  }

  /* Custom story album: the PANEL is the scroll owner. This is more reliable
     on Android Chrome than scrolling the fixed overlay itself. */
  .custom-album-modal.is-open {
    overflow:hidden !important;
    padding:0 !important;
  }
  .custom-album-panel {
    width:calc(100vw - 12px) !important;
    height:calc(100dvh - 12px) !important;
    max-height:calc(100dvh - 12px) !important;
    margin:6px auto !important;
    overflow-y:scroll !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior-y:contain !important;
    touch-action:pan-y !important;
  }
  .custom-album-zoom-frame {
    height:44dvh !important;
    min-height:260px !important;
    touch-action:pan-y !important;
  }
  .custom-album-zoom-frame.is-zoomed {
    touch-action:none !important;
  }
  .custom-album-meta,
  .custom-album-thumbs {
    touch-action:pan-y !important;
  }

  /* Spring / hard-pen / brush: make their panel the scroll container too. */
  .spring-modal,
  .hardpen-modal,
  .brush-modal {
    overflow:hidden !important;
    padding:6px !important;
  }
  .spring-modal-panel,
  .hardpen-modal-panel,
  .brush-modal-panel {
    width:100% !important;
    height:calc(100dvh - 12px) !important;
    max-height:calc(100dvh - 12px) !important;
    overflow-y:scroll !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior-y:contain !important;
    touch-action:pan-y !important;
  }
  .spring-zoom-frame,
  .hardpen-zoom-frame,
  .brush-zoom-frame {
    height:48dvh !important;
    min-height:270px !important;
    touch-action:pan-y !important;
  }
  .spring-zoom-frame.is-zoomed,
  .hardpen-zoom-frame.is-zoomed,
  .brush-zoom-frame.is-zoomed {
    touch-action:none !important;
  }
}


/* =========================================================
   v142 Mobile touch + homepage ink finishing
   - custom album thumbnail strip scrolls horizontally
   - homepage lower ink extends fully across the mobile hero
   ========================================================= */
@media (max-width: 760px) {
  /* Let the panel decide the gesture by child area: normal content can pan
     vertically, while the thumbnail rail can pan horizontally. */
  .custom-album-panel {
    touch-action:auto !important;
  }
  .custom-album-meta {
    touch-action:pan-y !important;
  }
  .custom-album-thumbs {
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior-x:contain !important;
    touch-action:pan-x !important;
    padding-bottom:10px !important;
  }
  .custom-album-thumb {
    touch-action:manipulation !important;
  }

  /* The old mobile ink ended near 80vw, leaving a small clean rectangle at
     the lower-right edge. Extend the same ink asset beyond the viewport. */
  body.home-page .hero {
    min-height:552px !important;
    padding-bottom:0 !important;
  }
  body.home-page .hero .ink-left {
    left:-16vw !important;
    bottom:-0.5vh !important;
    width:118vw !important;
    height:38vh !important;
    background-position:left bottom !important;
    background-size:100% 100% !important;
  }
}