/* Shared case typography for both portfolio themes. */
.project-case {
  --case-section-type:650 clamp(22px,2.1vw,30px)/1.4 var(--display);
  --case-mark:var(--muted);
  --duty-first:#355e9e;--duty-second:#705291;--duty-third:#24725d;
  counter-reset:case-section;
}
.personal-detail .project-case {
  --duty-first:#9bbaf0;--duty-second:#c1a8e1;--duty-third:#8dcab7;
}
.project-case .project-header {
  display:grid;grid-template-columns:minmax(0,1.13fr) minmax(0,.87fr);
  align-items:end;gap:clamp(32px,6vw,88px);
  padding-block:clamp(36px,4vw,60px) clamp(26px,3vw,42px);
}
.project-case .project-title {min-width:0}
.project-case .project-title h1 {
  display:flex;align-items:baseline;gap:.18em;margin:0;
  font:700 clamp(40px,4.6vw,68px)/1.18 var(--display);letter-spacing:-.045em;text-wrap:balance;overflow-wrap:anywhere;
}
.project-case .project-title h1::before {
  content:'>' / '';flex:none;color:var(--case-mark);
  font:500 .43em/1 var(--mono);letter-spacing:0;
}
.project-case .project-header .project-position {
  display:none;
}
.project-position::before {content:'[ ' / ''}
.project-position::after {content:' ]' / ''}
.project-case .project-header .project-need {
  margin:12px 0 0;max-width:39em;font:400 clamp(15px,1.2vw,18px)/1.75 var(--body);color:var(--ink);
}
.project-case .project-description {
  width:min(100%,435px);min-width:0;align-self:end;justify-self:end;margin:0;padding:0;
}
.project-case .project-description .responsibility-heading {
  margin:0 0 6px;color:var(--case-mark);font:550 13px/1.45 var(--mono);
}
.responsibility-heading::before {content:'// ' / ''}
.project-duties {list-style:none;counter-reset:duty;display:grid;gap:4px;margin:0;padding:0}
.project-duties li {
  display:flex;align-items:baseline;gap:10px;counter-increment:duty;
  color:var(--ink);font:500 14px/1.5 var(--body);
}
.project-duties li::before {
  content:'[' counter(duty,decimal-leading-zero) ']' / '';flex:none;
  color:#285de4;background:#e8efff;padding:4px 5px;border-radius:3px;font:700 11px/1.2 var(--mono);font-variant-numeric:tabular-nums;
}
.project-duties li:nth-child(3n+2)::before {color:#7548d4;background:#efe7fd}
.project-duties li:nth-child(3n)::before {color:#087f69;background:#dcf3e9}
.project-case h2.project-section-title {
  display:flex;align-items:baseline;gap:clamp(9px,1vw,14px);counter-increment:case-section;
  font:var(--case-section-type);letter-spacing:-.025em;
}
.project-section-title::before {
  content:'[' counter(case-section,decimal-leading-zero) ']' / '';flex:none;
  color:var(--case-mark);font:500 12px/1 var(--mono);letter-spacing:0;
}
.case-intro {padding:0 0 30px}
@media(max-width:760px){
  .project-case .project-header {grid-template-columns:minmax(0,1fr);gap:18px}
  .project-case .project-title h1 {font-size:clamp(32px,8.2vw,40px)}
  .project-case .project-description {justify-self:start}
  .case-intro {padding-bottom:23px}
}

/* Use the same full-width frame as the Lingjing canvas, including in narrower case layouts. */
.system-case-cover{display:block;position:relative;left:50%;transform:translateX(-50%);width:min(calc(100vw - 2 * var(--gutter)),1280px);max-width:none;height:auto;aspect-ratio:12/7;object-fit:cover;border:1px solid #e1e4e7;border-radius:3px;margin:0 0 32px}
.graph-views{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(12px,2vw,25px)}
.graph-views a{color:inherit}
.graph-views img{width:100%;height:auto;border:1px solid var(--line);border-radius:3px}
.graph-views span,.graph-live{display:inline-block;margin-top:7px;font:500 13px/1.6 var(--body)}
.graph-live{border-bottom:1px solid var(--line);margin-top:18px}
.graph-sample{margin-top:28px;border-top:1px solid var(--line);padding-top:20px}
.graph-sample h3{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin:0 0 15px}
.graph-sample h3 small,.graph-connections small{font:500 12px/1.5 var(--mono);color:#555c68}
.graph-sample label{display:block;font-size:13px;margin-bottom:6px}
.graph-sample select{max-width:100%;font:inherit;padding:8px;color:var(--ink);background:var(--bg);border:1px solid var(--line)}
.graph-connections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.graph-connections button{display:flex;gap:10px;align-items:baseline;text-align:left;padding:10px 0;background:transparent;border:0;border-bottom:1px solid var(--line)}
.graph-connections small{white-space:nowrap}
@media(max-width:640px){.graph-views,.graph-connections{grid-template-columns:1fr}}