/* CreativeKit's long-form page uses the portfolio's shared type and colors. */
.case-main{max-width:1100px}
.case-hero{padding:24px 0 28px;border-bottom:1px solid var(--line)}
.case-hero>.eyebrow{margin-top:18px}
.case-hero h1{max-width:850px;font-size:clamp(2.2rem,4.5vw,3.4rem)}
.case-deck{font-size:1.2rem;margin-top:16px;color:var(--muted)}
.case-meta{display:flex;flex-wrap:wrap;gap:16px 36px;margin:24px 0 0}
.case-meta dt{font-size:.875rem;color:var(--muted)}
.case-meta dd{margin:4px 0 0;font-size:1rem}
.case-meta a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.case-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:44px;padding:28px 0 40px;align-items:start}
.case-toc{position:sticky;top:90px;max-height:calc(100vh - 106px);overflow-y:auto;padding:8px}
.case-toc nav{display:flex;flex-direction:column;align-items:stretch;gap:0;margin-top:12px}
.case-toc nav a{display:flex;align-items:center;min-height:44px;padding:8px 0;font-size:.875rem;line-height:1.4;border-bottom:1px solid var(--line)}
.case-article{min-width:0}
.case-section{margin-bottom:28px;scroll-margin-top:95px}
.case-section h2{font-size:1.55rem;line-height:1.3;margin-bottom:14px;letter-spacing:-.025em}
.case-section p{font-size:1rem;line-height:1.75}
.case-section p+p{margin-top:14px}
.case-section a,.case-visual a{text-decoration:underline;text-underline-offset:3px;color:var(--accent)}
.case-visual{margin:0;background:var(--soft);padding:20px;border:1px solid var(--line);border-radius:6px}
.case-screens{display:flex;gap:16px;justify-content:center}
.case-screens img{width:calc(50% - 8px);height:auto;max-width:225px;object-fit:contain;border-radius:3px}
.case-visual figcaption,.export-diagram figcaption{font-size:.875rem;line-height:1.6;color:var(--muted);margin-top:14px}
.export-diagram{margin:20px 0;padding:18px;border:1px solid #dce4f7;border-radius:6px;background:var(--blue-soft)}
.export-diagram ol{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:0;margin:0}
.export-diagram li{min-width:0}
.export-diagram li>span{display:block;font-size:.875rem;color:var(--accent);margin-bottom:6px}
.export-diagram strong{display:block;font-size:1rem}
.export-diagram li p{font-size:1rem;line-height:1.5;margin-top:6px}
.case-contact{padding:24px;background:var(--blue-soft);border:1px solid #dce4f7;border-radius:6px}
.case-contact h2{font-size:1.65rem}
.case-contact p{margin:12px 0 20px}
@media(max-width:960px){.case-layout{grid-template-columns:180px minmax(0,1fr);gap:28px}}
@media(max-width:720px){
  .case-hero{padding-top:12px}
  .case-hero h1{font-size:clamp(2rem,7vw,2.8rem)}
  .case-hero>.eyebrow{font-size:.8125rem;letter-spacing:.07em}
  .case-meta{display:grid;grid-template-columns:1fr;gap:12px;margin-top:20px}
  .case-meta div{display:grid;grid-template-columns:90px minmax(0,1fr);gap:8px}
  .case-meta dd{margin:0}
  .case-layout{grid-template-columns:1fr;gap:24px;padding-top:20px}
  .case-toc{position:static;max-height:none;overflow:visible;padding:0}
  .case-toc nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
  .case-toc nav a{padding:10px 0}
  .case-section{scroll-margin-top:130px}
  .case-section h2{font-size:1.4rem}
  .case-visual{padding:14px}
  .case-screens{gap:10px}
  .case-screens img{width:calc(50% - 5px)}
  .export-diagram ol{grid-template-columns:1fr;gap:14px}
  .export-diagram li+li{border-top:1px solid #ccd8ef;padding-top:14px}
  .case-contact{padding:20px}
  .case-contact .button{gap:10px;text-align:center}
}

/* Real editor captures retain their full screen, with larger versions one click away. */
.case-capture{margin:22px 0;background:#f5f5f4}
.case-capture .case-screens{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:16px}
.case-capture .case-screens:has(>a:nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr))}
.case-capture .case-screens a{display:block;min-width:0;max-width:260px;justify-self:center;border-radius:5px;overflow:hidden}
.case-capture .case-screens a:only-child{grid-column:1 / -1;max-width:300px;width:100%}
.case-capture .case-screens img{display:block;width:100%;max-width:none;height:auto;border-radius:0}
.case-capture .case-screens a:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
@media(max-width:540px){.case-capture .case-screens,.case-capture .case-screens:has(>a:nth-child(3)){grid-template-columns:1fr}.case-capture .case-screens a{max-width:260px;width:100%}}

/* Promoted site's editorial navigation and restrained article colours. */
.editorial-case{--accent:#a63a2b;--blue-soft:#f8f5f3;--soft:#f5f5f4}
.editorial-case .case-main{width:min(1080px,calc(100% - 64px));margin-inline:auto}
.editorial-case .case-hero{padding-top:40px}
.editorial-case .case-hero h1{font-size:clamp(2.2rem,4.5vw,3.4rem);font-weight:700;line-height:1.18}
.editorial-case .case-toc{top:20px;max-height:calc(100vh - 40px)}
.editorial-case .case-meta{line-height:1.6}
.editorial-case .case-contact,.editorial-case .export-diagram{border-color:var(--line)}
@media(max-width:720px){.editorial-case .case-main{width:calc(100% - 40px)}.editorial-case .case-toc{max-height:none;top:auto}}