.project-detail { padding-block:42px 72px; }
.project-intro { margin-block:38px 48px; }
.project-intro h1 { max-width:930px; margin-block:14px 22px; font-size:clamp(30px,4vw,46px); font-weight:500; letter-spacing:-.045em; line-height:1.15; }
.project-lead { max-width:800px; color:#606458; font-size:17px; line-height:1.8; }
.section-navigation { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.section-navigation a { display:inline-flex; align-items:center; gap:12px; min-height:44px; padding:12px 16px; border:1px solid #d9ddcf; border-radius:5px; font-size:13px; }
.section-navigation a > span:first-child { color:#a64024; font-weight:650; }
.section-navigation a:hover { background:#e9ece1; }
.project-section { padding-top:38px; border-top:1px solid #d9ddcf; scroll-margin-top:105px; }
.project-section + .project-section { margin-top:56px; }
.project-section-heading { max-width:830px; margin-bottom:26px; }
.project-section-heading h2 { margin-block:12px 18px; font-size:clamp(25px,3vw,34px); }
.project-section-heading > p:last-child,.case-study p { color:#606458; font-size:15px; line-height:1.85; }
.project-note { color:#606458; font-size:12px; line-height:1.8; margin-top:14px; }
.case-study h3 { font-size:21px; font-weight:550; line-height:1.35; letter-spacing:-.025em; margin-bottom:14px; }
.case-source-links a:hover { color:#a64024; }
.case-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.case-panel { padding:26px; background:#eceee5; border:1px solid #d9ddcf; border-radius:6px; }
.case-process,.case-code,.case-results,.case-next { margin-top:38px; }
.process-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 36px; margin-top:24px; }
.process-list li { display:flex; align-items:flex-start; gap:16px; min-width:0; }
.process-number { flex-shrink:0; display:flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid #d0d5c7; border-radius:50%; font-size:11px; color:#a64024; }
.process-list h4 { font-size:15px; font-weight:600; margin-block:5px 8px; }
.process-list p { font-size:13px; overflow-wrap:anywhere; }
.case-source-links { display:flex; flex-wrap:wrap; gap:8px 28px; margin-top:22px; }
.case-source-links a { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding-block:8px; font-size:13px; text-decoration:underline; }
.case-screenshot { margin-top:30px; padding:14px; border:1px solid #d9ddcf; border-radius:6px; background:#fff; }
.case-screenshot img { display:block; width:100%; height:auto; }
.case-screenshot figcaption { padding:12px 4px 2px; color:#606458; font-size:12px; line-height:1.8; }
.code-block { max-width:100%; overflow-x:auto; margin-top:18px; padding:24px; border:1px solid #d0d5c7; border-radius:6px; background:#293126; color:#f6f5f0; font-size:13px; line-height:1.85; tab-size:4; }
.code-block code { font-family:Consolas,"Courier New",monospace; }
.result-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-block:22px; }
.result-grid > div { padding:24px; border:1px solid #d9ddcf; border-radius:6px; }
.result-grid dt { font-size:12px; font-weight:600; }
.result-grid dd strong { display:block; margin-block:12px; color:#a64024; font-size:36px; font-weight:500; letter-spacing:-.04em; }
.result-grid dd span { display:block; color:#606458; font-size:13px; line-height:1.85; }
.case-study .project-note { font-size:12px; }
.case-next { max-width:820px; padding-top:26px; border-top:1px solid #d9ddcf; }
@media(max-width:700px) {
  .project-detail { padding-block:30px 48px; }
  .project-intro { margin-block:28px 36px; }
  .project-lead { font-size:15px; }
  .project-section { padding-top:28px; scroll-margin-top:90px; }
  .case-grid,.process-list,.result-grid { grid-template-columns:1fr; gap:18px; }
  .case-panel,.result-grid > div { padding:22px; }
  .case-screenshot { padding:8px; }
  .code-block { padding:18px; font-size:12px; }
}