/* Solution gives the system overview; trade-offs and visual evidence live in Decisions. */
.case-architecture{border:1px solid #dbe6ec;border-radius:18px;background:#f6f9fb;padding:18px 20px;margin:22px 0 26px;color:#244760}
.case-architecture .ca-eyebrow{font-size:11px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:#66869a;margin-bottom:13px}
.case-architecture .ca-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.case-architecture .ca-step{border:1px solid #dce5eb;border-radius:12px;background:#fff;padding:15px;min-width:0}
.case-architecture .ca-step small{display:block;color:#6e93a9;font-size:11px;letter-spacing:.075em;font-weight:750;margin-bottom:7px}
.case-architecture .ca-step strong{display:block;font-size:16px;line-height:1.4;color:#244760}
.case-architecture .ca-step p{margin:8px 0 0!important;font-size:13px!important;line-height:1.65!important;color:#5e768a}
.case-architecture .ca-foot{margin-top:12px;color:#6c8293;font-size:12px;line-height:1.6}
.case-reason{margin:15px 0 19px;border-left:3px solid #669fc0;background:#f4f8fb;padding:12px 16px;border-radius:0 11px 11px 0;color:#31566f;font-size:14px;line-height:1.8}
.case-reason strong{color:#245174}
@media (max-width:700px){.case-architecture{padding:14px}.case-architecture .ca-flow{grid-template-columns:1fr;gap:8px}.case-architecture .ca-step{padding:12px}.case-reason{padding:10px 12px}}


/* Guide readers: Solution = what, Key Decisions = why. */
.case-his .section-no .case-section-question,
.case-chat .num .case-section-question,
.case-added .cp-num .case-section-question {
  display:inline-block;
  margin-left:14px;
  padding-left:15px;
  border-left:1px solid #bfd0dc;
  color:#516d83;
  font-size:14px;
  font-weight:550;
  letter-spacing:0;
  text-transform:none;
  line-height:1.4;
  vertical-align:baseline;
}
@media (max-width: 600px) {
  .case-his .section-no .case-section-question,
  .case-chat .num .case-section-question,
  .case-added .cp-num .case-section-question {
    display:block;
    margin:9px 0 0;
    padding:0;
    border-left:0;
    font-size:13px;
    line-height:1.55;
  }
}


.case-his .case-section-guidance,.case-chat .case-section-guidance,.case-added .case-section-guidance{margin:9px 0 19px;line-height:1.55}
.case-his .case-section-prompt,.case-chat .case-section-prompt,.case-added .case-section-prompt{font-size:16px;font-weight:750;color:#365c77;letter-spacing:.005em}
.case-his .case-section-helper,.case-chat .case-section-helper,.case-added .case-section-helper{font-size:13px;font-weight:400;color:#6b8396;line-height:1.7;margin-top:3px}
@media(max-width:600px){.case-his .case-section-prompt,.case-chat .case-section-prompt,.case-added .case-section-prompt{font-size:15px}.case-his .case-section-helper,.case-chat .case-section-helper,.case-added .case-section-helper{font-size:12.5px}}


.shell-page .hero-personal-positioning{max-width:790px}
.shell-page .hero-en{font-size:clamp(17px,2.1vw,22px);font-weight:650;color:#345b78;line-height:1.55;margin:21px 0 12px;max-width:735px}
.shell-page .hero-personal-positioning .intro{margin-top:0}
.shell-page .about-intro .about-headline{font-size:clamp(20px,2.9vw,29px);color:#2e6284;font-weight:720;line-height:1.45;margin:14px 0}
.shell-page .about-intro>p:last-child{max-width:810px}
.shell-page .about-profile{align-items:start}
.shell-page .about-fact{border-top:1px solid #e0e9ef;padding:14px 0;display:flex;flex-direction:column;gap:4px}
.shell-page .about-fact strong{font-size:14px;color:#28475e}
.shell-page .about-fact span{font-size:13px;color:#6d8292;line-height:1.65}
.shell-page .about-method{padding:54px 0 54px;border-bottom:1px solid #dce7ed}
.shell-page .about-method>h2{font-size:clamp(26px,3.2vw,40px);margin:14px 0 10px}
.shell-page .about-method-intro{max-width:800px;color:#60798c;line-height:1.85}
.shell-page .about-explore{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:45px 0 25px}
.shell-page .about-explore h2{margin:10px 0}
.shell-page .about-explore p{color:#667f91;max-width:590px}
.shell-page .about-explore .btn{flex-shrink:0}
.shell-page .about-note{font-size:12px;color:#8699a8;padding:0 0 48px}
@media(max-width:760px){.shell-page .about-explore{flex-direction:column;align-items:flex-start}.shell-page .about-profile{gap:24px}.shell-page .about-method{padding:38px 0}}


.site-nav .site-nav-actions{display:flex;align-items:center;gap:24px}
.site-nav .site-language{display:flex;align-items:center;gap:3px;background:#f1f5f8;border:1px solid #dce6ed;border-radius:99px;padding:4px}
.site-nav .site-language-current,.site-nav .site-language button{display:inline-flex;align-items:center;justify-content:center;padding:7px 10px;border-radius:99px;font-size:12px;font-weight:750;line-height:1;color:#56748c;letter-spacing:0;white-space:nowrap}
.site-nav .site-language-current{background:#fff;color:#20648c;box-shadow:0 1px 5px rgba(32,68,89,.10)}
.site-nav .site-language button{border:0;background:transparent;opacity:.42;cursor:not-allowed}
@media(max-width:680px){.site-nav{padding-left:16px;padding-right:16px}.site-nav .site-brand{font-size:19px;gap:4px}.site-nav .site-brand em{display:none}.site-nav .site-nav-actions{gap:10px}.site-nav .site-links{gap:12px}.site-nav .site-links a{font-size:12px}.site-nav .site-language-current,.site-nav .site-language button{font-size:11px;padding:6px 7px}.site-nav .site-language{padding:3px}}
@media(max-width:355px){.site-nav .site-nav-actions{gap:7px}.site-nav .site-links{gap:8px}.site-nav .site-language-current,.site-nav .site-language button{padding:5px 6px}}


.case-decision-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:24px 0 25px}
.case-decision-compare .compare-panel{border:1px solid #dce7ef;border-radius:13px;background:#f8fafc;padding:19px 20px}
.case-decision-compare .compare-panel.is-chosen{background:#edf6fc;border-color:#b7d7eb}
.case-decision-compare .compare-label{font-size:11px;font-weight:800;letter-spacing:.045em;color:#54758d;margin-bottom:10px}
.case-decision-compare .compare-panel.is-chosen .compare-label{color:#216a99}
.case-decision-compare .compare-flow{font-size:14px;line-height:1.8;color:#294960;margin:0}
.case-decision-compare .compare-note{font-size:12px;line-height:1.7;color:#698294;margin:9px 0 0}
@media(max-width:680px){.case-decision-compare{grid-template-columns:1fr}.case-decision-compare .compare-panel{padding:16px}}

/* Consistent, scannable Context sections across all five case studies. */
.case-context-facts{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:23px 0 5px;padding:0}
.case-context-facts .case-context-fact{display:grid;grid-template-columns:116px minmax(0,1fr);align-items:start;gap:18px;background:#fff;border:1px solid #dce7ee;border-radius:14px;padding:18px 20px;min-width:0}
.case-context-facts dt{font-size:13px;font-weight:800;line-height:1.75;letter-spacing:.03em;color:#287698}
.case-context-facts dd{margin:0;font-size:15px;line-height:1.78;color:#4c687c;min-width:0}
@media(max-width:700px){.case-context-facts{gap:9px}.case-context-facts .case-context-fact{grid-template-columns:1fr;gap:4px;padding:15px 17px}.case-context-facts dt{font-size:12px}.case-context-facts dd{font-size:14px;line-height:1.75}}


/* Bilingual preview: both language choices are accessible buttons. */
.site-nav .site-language button{opacity:1;cursor:pointer;background:transparent;border:0;box-shadow:none}
.site-nav .site-language button.site-language-current{background:#fff;color:#20648c;box-shadow:0 1px 5px rgba(32,68,89,.1);cursor:default}
.site-nav .site-language button:not(.site-language-current):hover{background:#e6edf2;color:#235876}
.site-nav .site-language button:disabled{opacity:.42;cursor:wait}
.site-nav .site-language button:focus-visible{outline:2px solid #287eaf;outline-offset:3px}
html[lang="en"] .case-context-facts .case-context-fact{grid-template-columns:130px minmax(0,1fr)}
@media(max-width:700px){html[lang="en"] .case-context-facts .case-context-fact{grid-template-columns:1fr}}


/* English-only responsive typography. Keep longer labels readable without affecting Chinese. */
html[lang="en"] .shell-page .hero h1,
html[lang="en"] .case-his .hero h1,
html[lang="en"] .case-chat .hero h1,
html[lang="en"] .case-added .cp-hero h1{
  letter-spacing:-.035em;
  overflow-wrap:break-word;
  hyphens:auto;
}
html[lang="en"] .shell-page .project h3,
html[lang="en"] .case-his h2,
html[lang="en"] .case-chat .sec h2,
html[lang="en"] .case-added .cp-sec h2{
  overflow-wrap:break-word;
  hyphens:auto;
}
html[lang="en"] .case-added .cp-meta strong,
html[lang="en"] .case-chat .meta-value{
  line-height:1.5;
}
@media(max-width:700px){
  html[lang="en"] .shell-page .hero h1{
    font-size:clamp(35px,9.6vw,46px);
    line-height:1.16;
  }
  html[lang="en"] .case-his .hero h1,
  html[lang="en"] .case-chat .hero h1{
    font-size:clamp(33px,9.2vw,43px);
    line-height:1.15;
  }
  html[lang="en"] .case-added .cp-hero h1{
    font-size:clamp(32px,8.9vw,43px);
    line-height:1.16;
  }
  html[lang="en"] .shell-page .project h3{font-size:clamp(21px,6vw,26px);}
  html[lang="en"] .case-his h2,
  html[lang="en"] .case-chat .sec h2,
  html[lang="en"] .case-added .cp-sec h2{
    font-size:clamp(23px,6.4vw,30px);
    line-height:1.3;
  }
}


/* About contact: restrained editorial close, one primary email action. */
.shell-page .about-contact{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(270px,.65fr);
  gap:28px;
  align-items:end;
  margin:0 0 36px;
  padding:36px 0 42px;
  border-top:1px solid #dce7ed;
  border-bottom:1px solid #dce7ed;
  background:transparent;
  border-radius:0;
}
.shell-page .about-contact h2{
  font-size:clamp(27px,3vw,35px);
  line-height:1.25;
  margin:10px 0 12px;
  color:#1a3d56;
}
.shell-page .about-contact p{
  max-width:560px;
  color:#567187;
  font-size:15px;
  line-height:1.8;
  margin:0;
}
.shell-page .about-contact-link{
  display:inline-flex;
  justify-self:end;
  align-items:baseline;
  gap:13px;
  min-width:0;
  padding:9px 0;
  font-size:clamp(15px,1.7vw,19px);
  line-height:1.55;
  font-weight:650;
  color:#245e82;
  text-decoration:none;
  border-bottom:1px solid #8cabbf;
  overflow-wrap:anywhere;
  transition:color .2s,border-color .2s;
}
.shell-page .about-contact-link:hover{
  color:#1474a3;
  border-color:#1474a3;
}
.shell-page .about-contact-link .about-contact-arrow{
  font-size:21px;
  line-height:1;
  flex-shrink:0;
}
.shell-page .about-contact-link:focus-visible{
  outline:2px solid #2973a3;
  outline-offset:4px;
  border-radius:2px;
}
@media(max-width:700px){
  .shell-page .about-contact{
    grid-template-columns:minmax(0,1fr);
    align-items:start;
    gap:20px;
    padding:29px 0 33px;
    margin-bottom:24px;
  }
  .shell-page .about-contact h2{font-size:28px;margin:8px 0 10px;}
  .shell-page .about-contact p{font-size:14px;}
  .shell-page .about-contact-link{
    justify-self:start;
    max-width:100%;
    font-size:16px;
    gap:10px;
  }
}

/* 2026-11-03: English case-study headlines wrap naturally rather than
   inheriting Chinese editorial <br> positions. Preserve zh-Hant layout. */
html[lang="en"] .case-his .hero h1 br,
html[lang="en"] .case-chat .hero h1 br,
html[lang="en"] .case-added .cp-hero h1 br{display:none}
html[lang="en"] .case-his .hero h1,
html[lang="en"] .case-chat .hero h1,
html[lang="en"] .case-added .cp-hero h1{
  max-width:100%;
  font-size:clamp(40px,4.55vw,65px);
  line-height:1.16;
  letter-spacing:-.045em;
  text-wrap:balance;
  hyphens:none;
  overflow-wrap:normal;
}
html[lang="en"] .case-chat .hero h1{font-size:clamp(40px,4.35vw,62px)}
html[lang="en"] .case-added .cp-hero h1{font-size:clamp(38px,4.5vw,62px)}
@media(max-width:700px){
  html[lang="en"] .case-his .hero h1,
  html[lang="en"] .case-chat .hero h1{
    font-size:clamp(33px,9.2vw,43px);
    line-height:1.15;
  }
  html[lang="en"] .case-added .cp-hero h1{
    font-size:clamp(32px,8.9vw,43px);
    line-height:1.16;
  }
}

/* About editorial evidence & career — 2026-11-04 */
.shell-page .about-profile{grid-template-columns:minmax(0,1.25fr) minmax(280px,.85fr);gap:44px;align-items:start}
.shell-page .about-profile h2{font-size:clamp(23px,2.25vw,28px);line-height:1.42;margin:9px 0 21px}
.shell-page .about-approach-list{display:grid;gap:0}
.shell-page .about-approach-item{padding:21px 0 23px;border-top:1px solid #e0e9ef}
.shell-page .about-approach-kicker{font-size:12px;line-height:1.5;font-weight:700;letter-spacing:.055em;color:#4b7a98}
.shell-page .about-approach-item h3{font-size:19px;line-height:1.45;letter-spacing:-.02em;color:#23445d;margin:7px 0 9px}
.shell-page .about-approach-item p{font-size:14px;line-height:1.85;color:#5b7488;margin:0 0 10px}
.shell-page .about-case-link{font-size:13px;font-weight:700;line-height:1.65;color:#236c9c;text-decoration:underline;text-underline-offset:4px;display:inline-flex;gap:8px;align-items:baseline}
.shell-page .about-case-link:hover{color:#184c70}
.shell-page .about-case-link:focus-visible{outline:2px solid #2675a4;outline-offset:4px;border-radius:2px}
.shell-page .about-career-entry{border-top:1px solid #e0e9ef;padding:19px 0 18px}
.shell-page .about-career-top{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:7px}
.shell-page .about-career-top strong{font-size:16px;line-height:1.45;color:#23445d}
.shell-page .about-career-top span{font-size:12px;line-height:1.5;font-weight:650;color:#607f96}
.shell-page .about-career-role{font-weight:650;font-size:14px;line-height:1.65;color:#40647b;margin:6px 0 7px}
.shell-page .about-career-entry p:not(.about-career-role){font-size:13px;line-height:1.85;color:#627d91;margin:0}
.shell-page .about-career-skills{padding-top:18px;border-top:1px solid #e0e9ef}
.shell-page .about-career-skills p{font-size:13px;line-height:1.85;color:#607b90;margin:8px 0 0}
@media(max-width:860px){
  .shell-page .about-profile{grid-template-columns:1fr;gap:24px}
  .shell-page .about-profile h2{margin-bottom:17px}
  .shell-page .about-approach-item{padding:18px 0 20px}
}

/* About imagery and LinkedIn contact — two user-provided photographs.
   Keep the portfolio's restrained editorial hierarchy and responsive rhythm. */
.shell-page .about-intro .about-intro-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(225px,27%);
  align-items:start;
  gap:clamp(26px,4.5vw,58px);
}
.shell-page .about-intro-copy{min-width:0}
.shell-page .about-portrait{min-width:0;margin:18px 0 0;line-height:0}
.shell-page .about-portrait img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:449/474;
  object-fit:cover;
  border-radius:16px;
  background:#b0bfca;
  box-shadow:0 14px 35px rgba(27,58,78,.10);
}
.shell-page .about-contact-links{
  min-width:0;
  display:grid;
  gap:13px;
  width:100%;
}
.shell-page .about-contact-links .about-contact-link{
  display:grid;
  grid-template-columns:70px minmax(0,1fr) 20px;
  align-items:baseline;
  gap:10px;
  width:100%;
  justify-self:stretch;
  padding:12px 0;
  font-size:15px;
  line-height:1.65;
}
.shell-page .about-contact-label{
  color:#617b90;
  font-size:12px;
  font-weight:700;
  letter-spacing:.035em;
}
.shell-page .about-contact-value{
  min-width:0;
  overflow-wrap:anywhere;
  font-weight:650;
}
.shell-page .about-contact-links .about-contact-arrow{
  align-self:center;
}
@media(max-width:860px){
  .shell-page .about-intro .about-intro-grid{
    grid-template-columns:minmax(0,1fr);
    gap:22px;
  }
  .shell-page .about-portrait{
    width:min(100%,290px);
    margin:2px 0 7px;
  }
}
@media(max-width:550px){
  .shell-page .about-contact-links .about-contact-link{
    grid-template-columns:58px minmax(0,1fr) 18px;
    gap:8px;
    font-size:14px;
  }
}

/* Beyond Design: one visual narrative plus a deliberately secondary culture note. */
.shell-page .about-beyond-feature{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(210px,31%);
  align-items:center;
  gap:clamp(24px,4vw,54px);
  margin:27px 0 0;
  padding:27px 29px 27px clamp(26px,3.4vw,43px);
  background:#f7fafc;
  border:1px solid #dce6ed;
  border-radius:16px;
}
.shell-page .about-beyond-copy{min-width:0;max-width:575px}
.shell-page .about-beyond-kicker{
  display:block;
  font-size:12px;
  font-weight:750;
  letter-spacing:.045em;
  color:#426f8c;
  margin:0 0 12px;
}
.shell-page .about-beyond-copy h3{
  margin:0 0 16px;
  font-size:clamp(23px,2.4vw,30px);
  font-weight:760;
  line-height:1.4;
  letter-spacing:-.02em;
  color:#24445b;
}
.shell-page .about-beyond-copy p{
  margin:0;
  font-size:15px;
  line-height:1.9;
  color:#5d778b;
}
.shell-page .about-mermaid-photo{min-width:0;max-width:290px;margin:0;line-height:0;justify-self:end}
.shell-page .about-mermaid-photo img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:9/16;
  object-fit:cover;
  object-position:center center;
  border-radius:12px;
  background:#101f37;
}
.shell-page .about-culture-note{
  display:flex;
  align-items:baseline;
  gap:22px;
  margin:24px 0 0;
  padding:22px 2px 2px;
  border-top:1px solid #dce7ed;
}
.shell-page .about-culture-label{
  flex-shrink:0;
  font-size:12px;
  font-weight:750;
  letter-spacing:.03em;
  color:#456d87;
}
.shell-page .about-culture-note p{
  margin:0;
  font-size:13px;
  line-height:1.85;
  color:#668094;
}
@media(max-width:760px){
  .shell-page .about-beyond-feature{
    grid-template-columns:minmax(0,1fr) minmax(155px,38%);
    gap:20px;
    padding:20px;
  }
  .shell-page .about-beyond-copy h3{font-size:23px;margin-bottom:11px}
  .shell-page .about-beyond-copy p{font-size:14px}
}
@media(max-width:550px){
  .shell-page .about-beyond-feature{
    grid-template-columns:1fr;
    gap:20px;
    padding:23px 21px;
  }
  .shell-page .about-mermaid-photo{
    width:min(100%,240px);
    max-width:none;
    justify-self:start;
  }
  .shell-page .about-culture-note{
    flex-direction:column;
    gap:7px;
    margin-top:19px;
    padding-top:18px;
  }
}

/* 2026 mermaid event highlights: compact evidence below the narrative,
   without adding a competing visual card beside the performance photo. */
.shell-page .about-mermaid-milestones{
  margin-top:25px;
  padding-top:19px;
  border-top:1px solid #dce6ed;
}
.shell-page .about-mermaid-milestones-label{
  color:#456f89;
  font-size:12px;
  font-weight:750;
  letter-spacing:.04em;
  line-height:1.6;
  margin-bottom:10px;
}
.shell-page .about-mermaid-milestones ul{
  padding:0;
  margin:0;
  list-style:none;
}
.shell-page .about-mermaid-milestones li{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  flex-wrap:wrap;
  gap:4px 15px;
  padding:7px 0;
  color:#5a7386;
  font-size:13px;
  line-height:1.65;
}
.shell-page .about-mermaid-milestones li strong{
  color:#294e68;
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
}
@media(max-width:550px){
  .shell-page .about-mermaid-milestones{margin-top:21px}
  .shell-page .about-mermaid-milestones li{font-size:13px}
}

/* Manual photo gallery: preserve full compositions, including the landscape photo. */
.shell-page .mermaid-carousel{width:100%;line-height:1.5}
.shell-page .mermaid-slides{aspect-ratio:2/3;background:#101f37;border-radius:12px;overflow:hidden;touch-action:pan-y}
.shell-page .mermaid-slides img{width:100%;height:100%;aspect-ratio:auto;object-fit:contain;border-radius:0}
.shell-page .mermaid-slides img[hidden]{display:none}
.shell-page .mermaid-controls{display:flex;align-items:center;justify-content:space-between;gap:4px;padding-top:10px}
.shell-page .mermaid-controls button{border:0;background:transparent;color:#24445b;min-width:44px;height:44px;cursor:pointer;font-size:20px;border-radius:8px}
.shell-page .mermaid-controls button:hover{background:#e1eaf0}
.shell-page .mermaid-controls button:focus-visible{outline:2px solid #245e82;outline-offset:2px}
.shell-page .mermaid-dots{display:flex}
.shell-page .mermaid-dots button{min-width:28px;width:28px;position:relative}
.shell-page .mermaid-dots button::after{content:"";display:block;width:6px;height:6px;border-radius:50%;background:#9aaebb;margin:auto}
.shell-page .mermaid-dots button[aria-pressed="true"]::after{background:#24445b;width:8px;height:8px}
.shell-page .mermaid-count{font-size:12px;color:#456d87;white-space:nowrap;font-variant-numeric:tabular-nums}