/* Portfolio: project images and the work behind each website. */
.breadcrumbs {font-size:.8rem;color:var(--muted);margin-bottom:42px}
.breadcrumbs ol {list-style:none;display:flex;flex-wrap:wrap;gap:.35rem .8rem;padding:0;margin:0}
.breadcrumbs li {display:flex;gap:.8rem;min-width:0}
.breadcrumbs li+li::before {content:'/';color:var(--muted)}
.breadcrumbs a {display:inline-block;min-height:44px;padding-block:8px}
.breadcrumbs [aria-current] {padding-block:8px}
.portfolio-hero {padding-top:26px;padding-bottom:64px}
.portfolio-intro,.case-heading {display:flex;flex-wrap:wrap;gap:24px 6rem;align-items:end;margin-top:24px;container-type:inline-size}
.portfolio-intro h1 {flex:1.5 1 31rem;font-size:clamp(2.2rem,4.4vw,4.1rem);max-width:100%;line-height:1.1}
.portfolio-intro h1 em {font-family:Newsreader,Georgia,serif;color:var(--blue);font-weight:400}
.portfolio-intro>p {flex:1 1 20rem;max-width:38rem;font-size:1.05rem}
.portfolio-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,28rem),1fr));gap:64px 40px;padding-bottom:80px}
.portfolio-project {min-width:0;container-type:inline-size}
.portfolio-preview {display:block;position:relative;background:#dce1db;border:1px solid var(--line);padding:24px;text-decoration:none}
.portfolio-preview img {width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;object-position:top;box-shadow:0 8px 25px #18222014}
.portfolio-project:first-child .portfolio-preview {background:#dce0e8}
.portfolio-project:nth-child(3) .portfolio-preview {background:#dce0e8}
.project-open {position:absolute;bottom:10px;right:10px;display:grid;place-items:center;width:44px;height:44px;background:var(--ink);color:var(--paper);font-size:1.35rem}
.portfolio-preview:hover .project-open {background:var(--blue)}
.portfolio-meta {padding-top:22px}
.portfolio-meta>.eyebrow {color:var(--muted);letter-spacing:.065em;display:block;font-size:.78rem}
.portfolio-meta h2 {font-size:min(2rem,12cqi);margin:12px 0}
.portfolio-meta h2 a {text-decoration:none;display:inline-block;min-height:44px}
.portfolio-meta>p {max-width:38rem}
.portfolio-meta .project-tags {margin-top:20px}
.project-tags {flex-wrap:wrap}
.all-work {display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px 40px;border-top:1px solid var(--line);padding-block:30px;margin-top:48px}
.all-work p {color:var(--muted);max-width:34rem}
.case-header {padding-top:26px;padding-bottom:32px;container-type:inline-size}
.case-heading h1 {font-size:min(clamp(2.3rem,5.1vw,4.6rem),13cqi);line-height:1.09;flex:1.5 1 30rem;max-width:100%}
.case-heading>p {flex:1 1 20rem;max-width:36rem;font-size:1.15rem;line-height:1.6}
.case-meta {display:flex;flex-wrap:wrap;gap:16px 40px;justify-content:space-between;align-items:center;margin-top:32px}
.case-meta .project-tags {margin:0}
.case-figure {padding-top:12px;margin-block:0}
.case-image {padding:clamp(16px,4vw,56px);background:#dce1db;border:1px solid var(--line)}
.case-image img {width:100%;height:auto;max-width:1200px;margin:auto;box-shadow:0 10px 35px #18222014}
.case-figure figcaption {font-size:.8rem;color:var(--muted);padding:12px 0}
.case-about,.case-delivery {display:flex;flex-wrap:wrap;gap:32px 6rem;padding-block:64px;container-type:inline-size}
.case-about>h2,.case-delivery>h2 {flex:1 1 16rem;min-width:0}
.case-about>p,.case-features {flex:2 1 28rem;min-width:0}
.case-about {border-bottom:1px solid var(--line)}
.case-about>p {font-size:1.25rem;line-height:1.75;max-width:48rem}
.case-delivery>h2 {font-size:min(2.15rem,12cqi)}
.case-features {min-width:0}
.case-feature {display:grid;grid-template-columns:2rem 1fr;gap:20px;padding-block:26px;border-bottom:1px solid var(--line)}
.case-feature:first-child {padding-top:0}
.case-feature:last-child {border:0;padding-bottom:0}
.case-feature>div {container-type:inline-size;min-width:0}
.case-feature h3 {font-size:min(1.4rem,10cqi);line-height:1.25;margin-bottom:12px}
.case-feature p {color:var(--muted);max-width:46rem}
.case-behind {background:var(--ink);color:var(--paper);padding-block:64px}
.behind-copy {display:flex;flex-wrap:wrap;gap:24px 6rem;margin-top:24px}
.behind-copy>h2 {flex:1 1 26rem;font-size:clamp(1.9rem,3vw,2.8rem);max-width:100%}
.behind-copy>p {flex:1 1 26rem;color:#ccd1cd;max-width:44rem}
.project-flow {list-style:none;padding:0;margin:36px 0 0;display:flex;flex-wrap:wrap;gap:16px 32px}
.project-flow li {flex:1 1 15rem;border-top:1px solid #59625f;padding-top:18px;font-size:1.05rem}
.project-contact {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 48px;padding-block:72px;container-type:inline-size}
.project-contact>div {flex:1 1 28rem;max-width:52rem;min-width:0}
.project-contact h2 {font-size:min(clamp(1.8rem,3.2vw,2.7rem),12cqi);margin-bottom:16px}
.project-contact p {color:var(--muted)}
.project-navigation {display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:32px;border-top:1px solid var(--line);padding-block:30px 48px}
.next-project {display:flex;flex-direction:column;gap:12px;max-width:100%;text-decoration:none;container-type:inline-size;width:min(100%,26rem)}
.next-project>.eyebrow {color:var(--muted)}
.next-project>span:last-child {font-size:min(1.65rem,12cqi);font-weight:600;line-height:1.4}
.site-nav [aria-current] {text-decoration:underline;text-underline-offset:.4em}
@media(max-width:760px) {
  .portfolio-hero {padding-bottom:36px}
  .breadcrumbs {margin-bottom:24px}
  .portfolio-intro h1 {font-size:min(2.5rem,11cqi)}
  .portfolio-grid {gap:40px;padding-bottom:36px}
  .portfolio-preview {padding:16px}
  .case-about,.case-delivery {grid-template-columns:1fr;gap:24px;padding-block:36px}
  .case-about>p {font-size:1.1rem}
  .case-feature {grid-template-columns:1fr;gap:8px}
  .case-feature .index {display:none}
  .case-behind {padding-block:40px}
  .behind-copy {container-type:inline-size}
  .behind-copy>h2 {font-size:min(2rem,12cqi)}
  .project-contact {padding-block:44px}
}

/* The project image can show a version that has not launched yet. */
.launch-label {display:inline-block;font-size:.875rem;line-height:1.6;color:var(--blue);border-bottom:1px solid var(--blue);padding-block:4px}
.portfolio-meta .launch-label {margin-top:12px}

.project-credit {display:block;margin-top:24px;padding-left:16px;border-left:2px solid var(--line);font-size:.9375rem;line-height:1.7;color:var(--muted)}