/* One consistent, readable invitation across campaign images and the hero. */
.case-clickable { cursor: pointer; }
.case-expand-icon { display: block; width: 23px; height: 23px; flex: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: square; }
.case-corner { transition: transform .35s cubic-bezier(.22, .7, .3, 1); }
.case-open-cue { display: inline-flex; align-items: center; gap: 17px; min-height: 46px; padding: 6px 7px 6px 18px; border: 1px solid #ffffff38; background: #1a211bf2; color: #f4f4e9; border-radius: 3px; box-shadow: 0 3px 16px #0002; white-space: nowrap; }
.case-cue-label { font: 500 11px/1.3 Arial, Helvetica, sans-serif; letter-spacing: .015em; }
.case-cue-icon { display: grid; place-items: center; width: 31px; height: 31px; background: #d7ef8d; color: #25351d; border-radius: 1px; }
#work.editorial-work .project-image > .case-open-cue { position: absolute; top: 22px; right: 22px; z-index: 3; pointer-events: none; }
#work.editorial-work .project-bottom .small-link { gap: 10px; font-size: 12px; }
#work.editorial-work .project-bottom .case-expand-icon { width: 19px; height: 19px; }

.opening-case-link { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; padding-bottom: 2px; }
.opening-case-link > .case-link-title { grid-row: auto; font-size: 20px; font-weight: 500; line-height: 1.25; color: #fff; letter-spacing: -.02em; }
.case-link-subtitle { display: block; margin-top: 5px; font-size: 12px; font-weight: 400; line-height: 1.5; letter-spacing: 0; color: #ccd5c3; }
.opening-case-link > .case-open-cue { grid-row: auto; color: #f4f4e9; font-weight: 500; letter-spacing: .015em; flex: none; }
.case-preview:focus-within .case-corner--a,
.opening-case-link:focus-visible .case-corner--a { transform: translate(-2px, -2px); }
.case-preview:focus-within .case-corner--b,
.opening-case-link:focus-visible .case-corner--b { transform: translate(2px, 2px); }

@media (hover: hover) {
  .case-preview:hover .case-corner--a,
  .opening-slide:hover .case-corner--a { transform: translate(-2px, -2px); }
  .case-preview:hover .case-corner--b,
  .opening-slide:hover .case-corner--b { transform: translate(2px, 2px); }
  .case-preview:hover .case-open-cue,
  .opening-slide:hover .case-open-cue { border-color: #d7ef8d; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #work.editorial-work .case-preview:hover .project-image img { transform: scale(1.035); }
}

/* The tab opens once as it enters view; the invitation then stays visible. */
@media (prefers-reduced-motion: no-preference) {
  .case-cue-enter .case-open-cue { animation: caseTabReveal .95s .12s cubic-bezier(.22, .7, .3, 1) both; }
  .case-cue-enter .case-cue-label { animation: caseLabelReveal .65s .35s ease both; }
  .case-cue-enter .case-cue-icon .case-expand-icon { animation: caseIconReveal .9s .15s ease both; }
}
@keyframes caseTabReveal {
  0%, 12% { clip-path: inset(0 0 0 calc(100% - 46px) round 3px); transform: translateY(5px); }
  100% { clip-path: inset(0 round 3px); transform: translateY(0); }
}
@keyframes caseLabelReveal { from { opacity: 0; transform: translateX(7px); } to { opacity: 1; transform: translateX(0); } }
@keyframes caseIconReveal { 0%, 20% { transform: scale(.82); } 65% { transform: scale(1.12); } 100% { transform: scale(1); } }
@media (max-width: 750px) {
  #work.editorial-work .project-image > .case-open-cue { top: 16px; right: 16px; }
  .case-open-cue { gap: 12px; padding-left: 14px; min-height: 44px; }
  .opening-case-link { gap: 12px; }
  .opening-case-link > .case-link-title { font-size: 18px; }
  .case-link-subtitle { font-size: 11px; }
  #work.editorial-work .project-grid .project-bottom { flex-wrap: wrap; }
}
@media (max-width: 390px) {
  .opening-case-link { grid-template-columns: 1fr; gap: 13px; }
  .opening-case-link > .case-open-cue { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .case-open-cue, .case-cue-label, .case-expand-icon, .case-corner { animation: none !important; transition: none !important; }
}