.portfolio-list{display:grid;gap:3rem;margin:2.5rem 0}
.project{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--white)}
.project-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:center}
.project-visual{padding:2rem;background:#dbe9e7;min-width:0}
.project--shifts .project-visual{background:#dfe8f4}
.project--olamps .project-visual{background:#f3e4d3}
.project-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-top:1rem}
.project-gallery img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border:3px solid #fff;border-radius:8px;box-shadow:0 8px 18px #17201f1c}
.project-preview{display:block;border:6px solid #253a3b;border-radius:12px;overflow:hidden;box-shadow:0 18px 32px #17201f26;transition:transform .2s}
.project-preview:hover{transform:translateY(-3px)}
.project-preview img{display:block;width:100%;height:auto}
.project-caption{margin:.8rem 0 0;font-size:.875rem;color:#354f50}
.project-copy{padding:2rem}
.project-copy h2{font-size:clamp(1.8rem,3vw,2.7rem)}
.project-copy h3{font-size:1rem;margin-top:1.5rem}
.project-copy .eyebrow{color:#536650;font-size:.875rem}
.project-copy .list{margin-bottom:1.5rem}
.project-copy .list li{margin:.6rem 0}
.project-status{display:inline-block;font-size:.875rem;font-weight:700;padding:.25rem .65rem;border:1px solid var(--line);border-radius:5px;margin-bottom:1rem}
.phone-details{margin:1.5rem 0 0}
.phone-details summary{font-weight:800;cursor:pointer;padding:.8rem 0;min-height:44px;text-decoration:underline;text-underline-offset:4px}
.phone-details summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.phone-preview{width:min(100%,390px);height:650px;margin:1rem auto;border:9px solid #17201f;border-top-width:20px;border-bottom-width:20px;border-radius:30px;background:white;overflow:hidden;box-shadow:0 18px 32px #17201f26}
.phone-preview iframe{display:block;border:0;width:100%;height:100%;background:white}
.phone-note{font-size:.875rem;color:#354f50;margin-top:1rem}
.work-teasers{margin-top:2rem}
.work-teaser{overflow:hidden;padding:0}
.work-teaser>a{display:block}
.work-teaser img{display:block;width:100%;height:auto;aspect-ratio:1348/926;object-fit:cover}
.work-teaser-copy{padding:1.5rem}
.work-teaser-copy p{color:var(--muted)}


@media(max-width:820px){.project-layout{grid-template-columns:1fr}.project-copy,.project-visual{padding:1.25rem}}
@media(prefers-reduced-motion:reduce){.project-preview{transition:none}.project-preview:hover{transform:none}}

/* Real work, presented as a consistent set of case studies. */
.portfolio-list{margin-top:0;gap:3rem}.project{border:1px solid var(--ink);border-radius:3px;box-shadow:6px 6px 0 var(--sage)}.project-layout{align-items:stretch}.project-visual{display:flex;flex-direction:column;justify-content:center;background:var(--sage-pale);padding:2rem}.project--shifts .project-visual{background:var(--gold-pale)}.project--olamps .project-visual{background:#e8dbca}.project-preview{border:4px solid var(--ink);border-radius:3px;box-shadow:7px 7px 0 #17201f22}.project-status{background:var(--sage-pale);border-color:var(--sage);border-radius:2px}.project-copy{padding:2rem}.project-copy h2{font-size:2.3rem}.phone-details summary{font-size:.9rem}.phone-preview{width:100%;max-width:390px}.project-copy .eyebrow{color:var(--sage-deep)}
@media(max-width:820px){.project-copy,.project-visual{padding:1.3rem}.project-copy h2{font-size:2rem}}

/* Match the studio's shared frame and spacing without changing project palettes. */
.project { border-radius: var(--radius, 6px); scroll-margin-top: 7rem; background: var(--card-surface); border-color: var(--line); border-top: 3px solid var(--accent-line); box-shadow: none; }
.project-visual, .project--shifts .project-visual, .project--olamps .project-visual { background: var(--card-surface); }
.project-copy { background: var(--white); }
.project-copy, .project-visual { padding: clamp(1.25rem, 3vw, 2.5rem); }
.project-preview { background: var(--white); box-shadow: none; }
.project-copy h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.project-caption, .phone-note { color: var(--muted); }
.project-status { line-height: 1.5; }
.phone-preview { height: min(650px, 75svh); }
.phone-details summary { min-height: 48px; }
@media(max-width:560px) {
  .portfolio-list { gap: 2.5rem; }
  .project { box-shadow: none; }
  .project-copy .button { width: 100%; }
  .project-preview { border-width: 3px; box-shadow: none; }
}