/* Work detail pages (is-*.html): one case per page.
   The hero reuses the folder and case-story styles from studio-work.css and work-folders.css;
   this file only lays out the page around them. */
.work-case-page { padding: 0 var(--gutter, 5vw) clamp(90px, 9vw, 140px); }
.work-case-page .studio-work { padding: 0; background: none; }

.work-case-back { max-width: 1680px; margin: clamp(26px, 3vw, 40px) auto 0; }

.work-case-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(40px, 6vw, 110px); max-width: 1680px; margin: clamp(30px, 4vw, 56px) auto 0; }
.work-case-hero .sw-case-figure { min-width: 0; }
.work-case-hero .sw-case-image > img { background: #000; }
.work-case-hero .folder-identity--code { justify-content: flex-end; }
.work-case-hero .sw-case-story h1 { margin: 0 0 26px; color: #f2efea; font: 300 clamp(40px, 5vw, 84px)/1.04 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -.05em; text-wrap: balance; }
.work-case-hero .sw-case-summary { max-width: 46ch; margin: 0 0 30px; color: var(--sw-text, #bec0c7); font-size: 19px; line-height: 1.6; }
.work-case-hero .sw-case-brief { margin: 0; }
.work-case-hero .sw-case-brief i { font-style: normal; color: #7d828d; }

/* Label and folder share one column, so the label sits on the folder's own left edge. */
.work-case-gallery { max-width: 760px; margin: clamp(80px, 9vw, 140px) auto 0; }
.work-case-gallery > h2 { margin: 0 0 22px; padding-left: 3%; color: #9296a1; font: 400 11px/1.5 var(--secondary, sans-serif); letter-spacing: .12em; text-transform: uppercase; }
.work-case-gallery .sw-case-figure { max-width: none; margin: 0; }

.work-case-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 1680px; margin: clamp(90px, 9vw, 150px) auto 0; padding-top: 10px; border-top: 1px solid #ffffff1f; }
.work-case-pager a { display: grid; gap: 10px; padding: 26px 0 8px; color: var(--page-ink, #eeede8); text-decoration: none; }
.work-case-pager a + a { text-align: right; }
.work-case-pager small { color: #9296a1; font: 400 11px/1.4 var(--secondary, sans-serif); letter-spacing: .12em; text-transform: uppercase; }
.work-case-pager span { font: 300 clamp(26px, 2.8vw, 44px)/1.08 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -.04em; transition: color .2s ease; }
.work-case-pager a:hover span { color: #fff; }
.work-case-pager a:focus-visible { outline: 2px solid #ebdcc6; outline-offset: 6px; border-radius: 3px; }

@media (max-width: 900px) {
  .work-case-hero { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .work-case-hero .sw-case-figure { max-width: 520px; }
}
@media (max-width: 760px) {
  .work-case-page { padding-inline: 24px; }
  .work-case-hero .sw-case-summary { font-size: 17px; }
  .work-case-pager { gap: 14px; }
  .work-case-pager span { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .work-case-pager span { transition: none; }
}