/* Layout axis must match the original renderer MOBILE_WIDTH = 812. */
/* Business context and method, followed by the original interface gallery. */
#project-details-meta:has(.case-intro) {
  display:block;width:calc(100vw - var(--base-padding-x) * 2);
  top:132px;transform:translateZ(0);pointer-events:none;
}
#project-details-meta:has(.case-intro)>#project-details-title {
  position:absolute;visibility:hidden;width:60%;height:64px;margin:0;top:24px;
}
#project-details-meta:has(.case-intro) #project-details-left {width:100%;float:none;margin:0;padding:0}
#project-details-meta:has(.case-intro) #project-details-desc {margin:0;max-width:none;font:inherit}
#project-details-meta:has(.case-intro) #project-details-right,
#project-details-meta:has(.case-intro) #project-details-launch-cta {display:none}
#project-details-meta.is-active .case-intro button {pointer-events:auto}
/* The directory already explains navigation; keep the fixed hint clear of it. */
#project-details:has(#project-details-meta.is-active .case-intro) #project-details-header-info {visibility:hidden}
.case-intro {
  --case-accent:var(--project-details-highlight);--case-ink:#202b35;
  --case-muted:#626d73;--case-line:#26333b25;
  display:grid;gap:26px;color:var(--case-ink);
  font-family:var(--personal-font,"Microsoft YaHei",sans-serif);
  font-size:14px;font-weight:400;line-height:1.8;letter-spacing:0;
  -webkit-font-smoothing:antialiased;
}
.case-intro[data-layout=patrol],.case-intro[data-layout=film] {
  --case-ink:#edf5f0;--case-muted:#a7b4b6;--case-line:#b4d5cc30;
}
.case-intro * {box-sizing:border-box}
#project-details-desc .case-intro :is(h2,h3,h4,p,dl,dt,dd) {margin:0;padding:0;font-family:inherit;letter-spacing:inherit}
#project-details-desc .case-intro p {font-size:inherit;font-weight:400;line-height:inherit}
.case-intro-header {display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(40px,6vw,100px);align-items:end}
.case-intro-copy,.case-context {min-width:0}
#project-details-desc .case-intro .case-kicker {display:flex;align-items:center;gap:14px;color:var(--case-accent);font-size:11px;letter-spacing:.1em;line-height:1.6;margin-bottom:12px}
.case-kicker>span {font-size:10px;color:var(--case-muted);border-left:1px solid var(--case-line);padding-left:14px;letter-spacing:.03em}
#project-details-desc .case-intro .case-main-title {font-size:clamp(25px,2.3vw,34px);font-weight:550;line-height:1.3;letter-spacing:-.035em;margin-bottom:14px}
#project-details-desc .case-intro .case-value {font-size:clamp(28px,2.9vw,43px);font-weight:550;line-height:1.5;letter-spacing:-.035em;text-wrap:pretty}
.case-value>span,.case-value>strong {display:block}
.case-value>strong {font-weight:inherit;color:var(--case-accent)}
#project-details-desc .case-intro .case-context h4 {font-size:11px;color:var(--case-accent);font-weight:500;letter-spacing:.1em;line-height:1.7;margin-bottom:10px}
#project-details-desc .case-intro .case-context p {font-size:14px;line-height:1.85;color:var(--case-ink);text-wrap:pretty}
#project-details-desc .case-intro .case-context .case-description {color:var(--case-muted);margin-top:12px;font-size:13px;line-height:1.85}
.case-methods {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:30px;border-top:1px solid var(--case-line);padding-top:20px}
.case-method {min-width:0}
.case-method+.case-method {padding-left:28px;border-left:1px solid var(--case-line)}
#project-details-desc .case-intro .case-method h4 {display:flex;gap:12px;align-items:baseline;font-size:17px;line-height:1.6;font-weight:550;margin-bottom:16px}
.case-method h4>span {font:11px/1.6 Arial,sans-serif;color:var(--case-accent);letter-spacing:.04em}
.case-method dl {display:grid;gap:13px}
#project-details-desc .case-intro .case-method dt {font-size:14px;font-weight:500;line-height:1.65;margin-bottom:3px}
#project-details-desc .case-intro .case-method dd {font-size:13px;line-height:1.8;font-weight:400;color:var(--case-muted);text-wrap:pretty}
.case-decision {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.65fr);gap:30px;align-items:center;border-top:1px solid var(--case-line);border-bottom:1px solid var(--case-line);padding:17px 0}
.case-decision>div {padding-left:16px;border-left:2px solid var(--case-accent)}
.case-decision>div>span {display:block;color:var(--case-accent);font-size:10px;letter-spacing:.08em;line-height:1.6;margin-bottom:6px}
#project-details-desc .case-intro .case-decision h4 {font-size:15px;font-weight:500;line-height:1.7}
#project-details-desc .case-intro .case-decision p {font-size:13px;line-height:1.85;color:var(--case-muted)}
.case-gallery-heading {display:flex;align-items:baseline;gap:18px;margin-bottom:10px}
#project-details-desc .case-intro .case-gallery-heading h4 {font-size:11px;line-height:1.7;letter-spacing:.08em;font-weight:500}
#project-details-desc .case-intro .case-gallery-heading p {font-size:10px;line-height:1.7;color:var(--case-muted)}
.case-gallery-guide nav {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.case-gallery-link {display:flex;align-items:center;gap:10px;min-width:0;min-height:44px;padding:9px 0;border:0;border-top:1px solid var(--case-line);background:transparent;color:var(--case-ink);font:400 12px/1.65 var(--personal-font,"Microsoft YaHei",sans-serif);text-align:left;cursor:pointer;touch-action:manipulation;transition:color .18s,border-color .18s}
.case-gallery-number {font:10px/1.65 Arial,sans-serif;letter-spacing:.04em;color:var(--case-accent)}
.case-gallery-arrow {margin-left:auto;color:var(--case-accent);font:17px/1 Arial,sans-serif;flex-shrink:0}
.case-gallery-link:hover {color:var(--case-accent);border-color:var(--case-accent)}
.case-gallery-link:focus-visible {outline:2px solid var(--case-accent);outline-offset:5px}
@media(min-width:813px) and (max-height:800px) {
  #project-details-meta:has(.case-intro) {top:115px}
  .case-intro {gap:18px}
  #project-details-desc .case-intro .case-kicker {margin-bottom:8px}
  #project-details-desc .case-intro .case-main-title {font-size:25px;margin-bottom:10px}
  #project-details-desc .case-intro .case-value {font-size:29px;line-height:1.4}
  #project-details-desc .case-intro .case-context p {font-size:13px;line-height:1.75}
  #project-details-desc .case-intro .case-context .case-description {margin-top:8px;font-size:12px}
  .case-methods {padding-top:15px}
  #project-details-desc .case-intro .case-method h4 {font-size:16px;margin-bottom:11px}
  .case-method dl {gap:9px}
  #project-details-desc .case-intro .case-method dt {font-size:13px;margin-bottom:2px}
  #project-details-desc .case-intro .case-method dd {font-size:12px;line-height:1.7}
  .case-decision {padding:12px 0}
  #project-details-desc .case-intro .case-decision h4 {font-size:14px}
  #project-details-desc .case-intro .case-decision p {font-size:12px;line-height:1.75}
  .case-gallery-heading {margin-bottom:6px}
  .case-gallery-link {font-size:11px}
}
@media(min-width:1600px) {
  .case-intro {gap:32px}
  .case-methods {column-gap:40px;padding-top:25px}
  .case-method+.case-method {padding-left:38px}
  #project-details-desc .case-intro .case-context p {font-size:16px}
  #project-details-desc .case-intro .case-context .case-description {font-size:14px}
  #project-details-desc .case-intro .case-method h4 {font-size:20px;margin-bottom:20px}
  #project-details-desc .case-intro .case-method dt {font-size:16px}
  #project-details-desc .case-intro .case-method dd {font-size:15px}
  .case-method dl {gap:17px}
  #project-details-desc .case-intro .case-decision h4 {font-size:17px}
  #project-details-desc .case-intro .case-decision p {font-size:15px}
  .case-decision {padding:21px 0}
  .case-gallery-link {font-size:14px}
}
@media(max-width:812px) {
  #project-details-meta:has(.case-intro) {position:relative;top:0;padding-top:120px;padding-bottom:32px;width:100%;min-width:0}
  #project-details-meta:has(.case-intro)>#project-details-title {top:120px}
  .case-intro {gap:26px}
  .case-intro-header {grid-template-columns:1fr;gap:22px}
  #project-details-desc .case-intro .case-main-title {font-size:29px}
  #project-details-desc .case-intro .case-value {font-size:clamp(27px,4vw,38px)}
  .case-context {display:grid;grid-template-columns:1fr 1fr;gap:7px 28px}
  #project-details-desc .case-intro .case-context h4 {grid-column:1/-1;margin-bottom:0}
  #project-details-desc .case-intro .case-context .case-description {margin:0}
  .case-methods {column-gap:20px}
  .case-method+.case-method {padding-left:18px}
  #project-details-desc .case-intro .case-method h4 {font-size:15px;gap:8px}
  .case-decision {grid-template-columns:1fr 1.4fr;gap:24px}
  .case-gallery-guide nav {grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 24px}
  .case-gallery-link {font-size:13px;min-height:48px}
}
@media(max-width:600px) {
  #project-details-meta:has(.case-intro) {padding-top:108px}
  .case-intro {gap:24px}
  #project-details-desc .case-intro .case-main-title {font-size:26px;margin-bottom:13px}
  #project-details-desc .case-intro .case-value {font-size:clamp(24px,6.2vw,33px);line-height:1.6}
  .case-context {display:block}
  #project-details-desc .case-intro .case-context h4 {margin-bottom:8px}
  #project-details-desc .case-intro .case-context p {font-size:14px;line-height:1.85}
  #project-details-desc .case-intro .case-context .case-description {margin-top:10px;font-size:13px}
  .case-methods {grid-template-columns:1fr;gap:22px;padding-top:20px}
  .case-method+.case-method {padding:20px 0 0;border-left:0;border-top:1px solid var(--case-line)}
  #project-details-desc .case-intro .case-method h4 {font-size:17px;margin-bottom:13px}
  .case-method dl {gap:12px}
  .case-method dl>div {display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;align-items:baseline}
  #project-details-desc .case-intro .case-method dt {font-size:13px}
  #project-details-desc .case-intro .case-method dd {font-size:13px}
  .case-decision {grid-template-columns:1fr;gap:12px;padding:18px 0}
  #project-details-desc .case-intro .case-decision h4 {font-size:15px}
  #project-details-desc .case-intro .case-decision p {font-size:13px}
  .case-gallery-heading {display:block}
  #project-details-desc .case-intro .case-gallery-heading p {margin-top:5px}
  .case-gallery-guide nav {gap:4px 18px}
  .case-gallery-link {font-size:12px;gap:8px}
}
@media(max-width:360px) {
  .case-method dl>div {grid-template-columns:96px minmax(0,1fr);gap:10px}
  .case-gallery-guide nav {grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce) {.case-gallery-link {transition:none}}

/* Compact desktop keeps the horizontal gallery between 813 and 1000 px. */
@media(min-width:813px) and (max-width:1000px) {
  .case-intro-header {gap:30px}
  #project-details-desc .case-intro .case-main-title {font-size:24px}
  #project-details-desc .case-intro .case-value {font-size:clamp(24px,3vw,28px)}
  .case-methods {column-gap:18px}
  .case-method+.case-method {padding-left:16px}
  #project-details-desc .case-intro .case-method h4 {font-size:15px;gap:8px}
  .case-gallery-guide nav {gap:12px}
  .case-gallery-link {font-size:11px;gap:7px}
}