/* Selected work extends the existing static site's type, colour and divider system. */
.selected-work { background: #F4F7F5; }
.work-heading { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 48px; margin-bottom: 48px; }
.work-heading h2 { margin-bottom: 0; }
.work-heading > p { max-width: 360px; margin: 0 0 4px; color: #43514D; font-size: 1.08rem; }
.work-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; margin-bottom: 64px; }
.work-lane { min-width: 0; border-top: 1px solid #B9CCC2; padding-top: 24px; }
.work-lane h3 { font-size: 1.4rem; margin: 10px 0 16px; }
.work-lane > p:not(.section-label) { color: #34473E; }
.work-lane .work-link { font-size: .92rem; gap: 10px; }
.work-cabinet + .work-cabinet { margin-top: 64px; }
.work-cabinet-heading { margin-bottom: 28px; }
.work-cabinet-heading h3 { margin: 10px 0 0; font-size: 1.6rem; }
.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.work-project { min-width: 0; border-top: 1px solid #B9CCC2; padding-top: 28px; }
.work-visual { min-width: 0; background: var(--gray); color: var(--navy); border: 1px solid #CAD8D0; }
.work-visual img { width: 100%; height: auto; aspect-ratio: 1200 / 824; object-fit: contain; }
.work-copy { min-width: 0; padding-top: 26px; }
.work-meta { display: flex; flex-wrap: wrap; gap: 10px; color: var(--green-text-on-gray); font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.work-copy h4 { margin: 0 0 18px; font-size: clamp(1.85rem, 2.8vw, 2.6rem); line-height: 1.12; letter-spacing: -.035em; }
.work-preview { margin-top: 24px; border-block: 1px solid #B9CCC2; }
.work-preview summary { padding: 16px 0; color: var(--green-text-on-gray); cursor: pointer; font-weight: 750; }
.work-preview-body { padding: 4px 0 18px; color: #34473E; }
.work-preview-title { font-weight: 750; color: var(--navy); }
.work-preview-body ul { padding-left: 22px; margin: 16px 0; }
.work-preview-body li + li { margin-top: 8px; }
.work-preview-note { font-size: .82rem; margin-bottom: 0; }
.work-copy > p:not(.work-meta) { color: #34473E; }
.work-try { margin: 23px 0; }
.work-try strong { display: block; margin-bottom: 5px; color: var(--navy); font-size: .82rem; }
.work-link { display: inline-flex; align-items: center; min-height: 48px; gap: 20px; padding-block: 8px; color: var(--green-text-on-gray); font-weight: 750; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.work-link:hover { color: var(--navy); text-decoration-thickness: 2px; }
.work-link:active { transform: translateY(1px); }
.work-link-context { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.work-copy .work-disclosure { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid #CAD8D0; font-size: .86rem; }
.work-grid--single { grid-template-columns: 1fr; }
.work-grid--single .work-project { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); align-items: center; gap: 48px; }
.work-grid--single .work-copy { padding-top: 0; }
@media (min-width: 1021px) and (max-width: 1250px) {
  .nav-wrap { gap: 20px; }
  .nav { gap: 18px; font-size: .86rem; }
  .nav-cta { padding-inline: 14px; }
}
@media (max-width: 900px) {
  .work-heading, .work-grid, .work-grid--single .work-project { grid-template-columns: 1fr; }
  .work-lanes { grid-template-columns: 1fr; gap: 24px; margin-bottom: 44px; }
  .work-heading { gap: 22px; margin-bottom: 32px; }
  .work-heading > p { max-width: 540px; }
  .work-grid--single .work-project { gap: 26px; }
}
@media (max-width: 520px) {
  .work-copy h4, .work-heading h2, .work-meta, .work-copy p, .work-lane { overflow-wrap: anywhere; }
  .work-link { max-width: 100%; }
}